clean up prompts and improve quality

App.tsx

@@ -10,6 +10,7 @@ import CBTReference from './components/CBTReference';
 import SettingsModal from './components/SettingsModal';
 import Tooltip from './components/Tooltip';
 import { Brain, Info, ShieldCheck, Filter, Plus, BookOpen, Activity, Zap, Settings } from 'lucide-react';
+import { Button } from './components/ui/button';
 
 const DEFAULT_SETTINGS: UserSettings = {
   voiceName: 'Zephyr',
@@ -25,7 +26,7 @@ const App: React.FC = () => {
   const [sessionMode, setSessionMode] = useState<SessionMode>('text');
   const [selectedDifficulty, setSelectedDifficulty] = useState<string>('All');
   const [isPreparing, setIsPreparing] = useState(false);
-  
+
   // Custom Scenarios State with LocalStorage persistence
   const [customScenarios, setCustomScenarios] = useState<Scenario[]>(() => {
     try {
@@ -80,7 +81,7 @@ const App: React.FC = () => {
   }, []);
 
   const allScenarios = [...customScenarios, ...SCENARIOS];
-  const filteredScenarios = allScenarios.filter(scenario => 
+  const filteredScenarios = allScenarios.filter(scenario =>
     selectedDifficulty === 'All' || scenario.difficulty === selectedDifficulty
   );
 
@@ -99,7 +100,7 @@ const App: React.FC = () => {
             <Brain size={48} className="text-teal-400" />
             <div className="absolute inset-0 border-2 border-teal-500/30 rounded-3xl animate-ping opacity-20"></div>
           </div>
-          
+
           <h2 className="text-2xl font-bold mb-3 tracking-tight">Initializing Session</h2>
           <div className="flex items-center gap-2 mb-8">
             <span className="h-1.5 w-1.5 bg-teal-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></span>
@@ -143,12 +144,12 @@ const App: React.FC = () => {
           <ChatSession scenario={activeScenario} onExit={handleExitSession} />
         ) : (
           <div className="w-full max-w-4xl h-[80vh]">
-             <VoiceSession 
-               scenario={activeScenario} 
-               onExit={handleExitSession} 
-               voiceSettings={userSettings} 
-               onUpdateSettings={setUserSettings}
-             />
+            <VoiceSession
+              scenario={activeScenario}
+              onExit={handleExitSession}
+              voiceSettings={userSettings}
+              onUpdateSettings={setUserSettings}
+            />
           </div>
         )}
       </div>
@@ -172,32 +173,35 @@ const App: React.FC = () => {
               </div>
               <h1 className="text-3xl font-bold tracking-tight text-slate-900">Cognitive Clarity</h1>
             </div>
-            
+
             <div className="flex items-center gap-2">
               <Tooltip content="Adjust voice settings for audio sessions.">
-                <button 
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="rounded-xl text-slate-400 hover:text-slate-800"
                   onClick={() => setShowSettings(true)}
-                  className="p-2.5 rounded-xl bg-slate-50 border border-slate-200 text-slate-400 hover:text-slate-800 transition-all"
                 >
                   <Settings size={20} />
-                </button>
+                </Button>
               </Tooltip>
               <Tooltip content="Explore the glossary of CBT distortions, techniques, and concepts.">
-                <button 
+                <Button
+                  variant="outline"
+                  className="rounded-xl text-slate-600 hover:text-teal-700 hover:bg-teal-50"
                   onClick={() => setShowReference(true)}
-                  className="flex items-center justify-center gap-2 bg-slate-50 text-slate-600 hover:text-teal-700 hover:bg-teal-50 px-5 py-2.5 rounded-xl border border-slate-200 transition-all font-bold text-sm"
                 >
-                  <BookOpen size={18} />
-                  <span>Reference Guide</span>
-                </button>
+                  <BookOpen size={18} className="mr-2" />
+                  Reference Guide
+                </Button>
               </Tooltip>
             </div>
           </div>
-          
+
           <p className="text-xl text-slate-600 max-w-2xl leading-relaxed font-light">
             An adaptive clinical training environment designed to strengthen cognitive flexibility and navigate social friction.
           </p>
-          
+
           <div className="flex flex-wrap gap-4 mt-8">
             <Tooltip content="Our scenarios are built on the foundations of Cognitive Behavioral Therapy.">
               <div className="flex items-center gap-2 text-sm text-slate-500 bg-slate-50 px-3 py-1.5 rounded-full border border-slate-100 cursor-help">
@@ -222,64 +226,65 @@ const App: React.FC = () => {
           <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
             <div className="flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm overflow-x-auto">
               <div className="px-3 text-slate-400 flex items-center gap-2 text-sm font-medium border-r border-slate-100 mr-1">
-                 <Filter size={14} />
-                 <span className="hidden sm:inline">Difficulty</span>
+                <Filter size={14} />
+                <span className="hidden sm:inline">Difficulty</span>
               </div>
               <div className="flex gap-1">
                 {difficulties.map((diff) => (
-                  <button
+                  <Button
                     key={diff}
+                    variant={selectedDifficulty === diff ? "secondary" : "ghost"}
+                    size="sm"
                     onClick={() => setSelectedDifficulty(diff)}
-                    className={`px-3 py-1.5 text-xs rounded-md transition-all whitespace-nowrap ${
-                      selectedDifficulty === diff
-                        ? 'bg-teal-50 text-teal-700 font-semibold border border-teal-100'
-                        : 'text-slate-500 hover:bg-slate-50 border border-transparent'
-                    }`}
+                    className={`h-7 px-3 text-xs ${selectedDifficulty === diff ? 'bg-teal-50 text-teal-700 font-semibold hover:bg-teal-100 hover:text-teal-800' : 'text-slate-500 hover:text-slate-700'}`}
                   >
                     {diff}
-                  </button>
+                  </Button>
                 ))}
               </div>
             </div>
 
             <Tooltip content="Generate a unique roleplay situation based on your specific needs using AI." position="bottom">
-              <button 
-                onClick={() => setShowGenerator(true)}
-                className="flex items-center justify-center gap-2 bg-teal-600 text-white px-5 py-2.5 rounded-lg hover:bg-teal-700 transition-all font-bold text-sm shadow-md shadow-teal-100"
-              >
-                <Plus size={18} />
-                <span>Create Custom</span>
-              </button>
+              <div>
+                <Button
+                  onClick={() => setShowGenerator(true)}
+                  className="bg-teal-600 hover:bg-teal-700 text-white shadow-md shadow-teal-100 font-bold"
+                >
+                  <Plus size={18} className="mr-2" />
+                  Create Custom
+                </Button>
+              </div>
             </Tooltip>
           </div>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {filteredScenarios.map(scenario => (
-            <ScenarioCard 
-              key={scenario.id} 
-              scenario={scenario} 
-              onSelect={handleSelectScenario} 
+            <ScenarioCard
+              key={scenario.id}
+              scenario={scenario}
+              onSelect={handleSelectScenario}
               onDelete={scenario.id.startsWith('custom-') ? handleDeleteScenario : undefined}
             />
           ))}
-          <button 
+          <Button
+            variant="outline"
             onClick={() => setShowGenerator(true)}
-            className="flex flex-col items-center justify-center gap-4 p-6 rounded-xl border-2 border-dashed border-slate-200 text-slate-400 hover:border-teal-300 hover:text-teal-600 hover:bg-teal-50/50 transition-all h-full min-h-[250px] group"
+            className="flex flex-col items-center justify-center gap-4 p-6 rounded-xl border-2 border-dashed border-slate-200 text-slate-400 hover:border-teal-300 hover:text-teal-600 hover:bg-teal-50/50 transition-all h-full min-h-[250px] group whitespace-normal"
           >
             <div className="bg-slate-50 p-4 rounded-full group-hover:bg-white transition-colors"><Plus size={32} /></div>
             <div className="text-center">
               <span className="block font-bold text-sm uppercase tracking-widest mb-1">Custom Scenario</span>
               <span className="text-xs font-light">Generate a specific roleplay session</span>
             </div>
-          </button>
+          </Button>
         </div>
       </main>
-      
+
       <footer className="bg-white border-t border-slate-200 py-12">
         <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-8">
           <div className="flex items-center gap-2 text-slate-400">
-             <Brain size={20} /><span className="text-sm font-bold uppercase tracking-widest">Cognitive Clarity v1.2</span>
+            <Brain size={20} /><span className="text-sm font-bold uppercase tracking-widest">Cognitive Clarity v1.2</span>
           </div>
         </div>
       </footer>