feat: Add user settings for voice and persona
Introduces a new `UserSettings` interface and default settings. This allows users to customize voice preferences (name, style, gender) and persona characteristics within the application. This enhances personalization and user experience by tailoring interactions to individual needs and preferences.
This commit is contained in:
John Remillard committed
1 parent
c78604de02
commit
a7a8c661b7
9 files changed
+670
-360
No files matched your search
@@ -1,7 +1,8 @@
|
||||
|
||||
import React from 'react';
|
||||
import { BrainCircuit, Loader2, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp } from 'lucide-react';
|
||||
import { BrainCircuit, Loader2, CheckCircle2, AlertTriangle, Lightbulb, TrendingUp, Info } from 'lucide-react';
|
||||
import { AnalysisResult } from '../types';
|
||||
import Tooltip from './Tooltip';
|
||||
|
||||
interface LiveInsightPanelProps {
|
||||
analysis: AnalysisResult | null;
|
||||
@@ -22,61 +23,69 @@ const LiveInsightPanel: React.FC<LiveInsightPanelProps> = ({ analysis, isAnalyzi
|
||||
<div className="p-6 space-y-6">
|
||||
{analysis ? (
|
||||
<div className="animate-in fade-in duration-500 space-y-5">
|
||||
<div className={`p-5 rounded-2xl border-l-4 ${analysis.analysis.isAdaptive ? 'bg-teal-50/50 border-teal-500' : 'bg-rose-50/50 border-rose-500'}`}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{analysis.analysis.isAdaptive ? (
|
||||
<CheckCircle2 size={16} className="text-teal-600" />
|
||||
) : (
|
||||
<AlertTriangle size={16} className="text-rose-600" />
|
||||
<Tooltip content="Identifies whether your last statement followed adaptive, evidence-based thinking patterns or contained cognitive distortions.">
|
||||
<div className={`p-5 rounded-2xl border-l-4 w-full ${analysis.analysis.isAdaptive ? 'bg-teal-50/50 border-teal-500' : 'bg-rose-50/50 border-rose-500'}`}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
{analysis.analysis.isAdaptive ? (
|
||||
<CheckCircle2 size={16} className="text-teal-600" />
|
||||
) : (
|
||||
<AlertTriangle size={16} className="text-rose-600" />
|
||||
)}
|
||||
<span className={`font-bold text-[10px] uppercase tracking-wider ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
|
||||
{analysis.analysis.isAdaptive ? 'Optimal Thinking' : 'Distortion Identified'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{!analysis.analysis.isAdaptive && analysis.analysis.distortions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{analysis.analysis.distortions.map((d, i) => (
|
||||
<span key={i} className="text-[9px] font-black uppercase tracking-widest text-white bg-rose-500 px-2 py-0.5 rounded shadow-sm">
|
||||
{d}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<span className={`font-bold text-[10px] uppercase tracking-wider ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
|
||||
{analysis.analysis.isAdaptive ? 'Optimal Thinking' : 'Distortion Identified'}
|
||||
</span>
|
||||
|
||||
<p className={`text-xs leading-relaxed font-medium ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
|
||||
{analysis.analysis.evidence}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{!analysis.analysis.isAdaptive && analysis.analysis.distortions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||
{analysis.analysis.distortions.map((d, i) => (
|
||||
<span key={i} className="text-[9px] font-black uppercase tracking-widest text-white bg-rose-500 px-2 py-0.5 rounded shadow-sm">
|
||||
{d}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className={`text-xs leading-relaxed font-medium ${analysis.analysis.isAdaptive ? 'text-teal-800' : 'text-rose-800'}`}>
|
||||
{analysis.analysis.evidence}
|
||||
</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 shadow-inner">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Efficiency</span>
|
||||
<div className="flex gap-1">
|
||||
{[1,2,3,4,5].map(star => (
|
||||
<div key={star} className={`h-1.5 w-4 rounded-full ${star <= analysis.rating.score ? 'bg-teal-500' : 'bg-slate-200'}`} />
|
||||
))}
|
||||
<Tooltip content="A score representing your effectiveness in applying CBT techniques to this specific turn.">
|
||||
<div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 shadow-inner w-full">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Efficiency</span>
|
||||
<div className="flex gap-1">
|
||||
{[1,2,3,4,5].map(star => (
|
||||
<div key={star} className={`h-1.5 w-4 rounded-full ${star <= analysis.rating.score ? 'bg-teal-500' : 'bg-slate-200'}`} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 font-medium leading-relaxed">{analysis.rating.reason}</p>
|
||||
</div>
|
||||
<p className="text-xs text-slate-600 font-medium leading-relaxed">{analysis.rating.reason}</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm relative overflow-hidden group">
|
||||
<div className="flex items-center gap-2 text-teal-600 mb-2">
|
||||
<Lightbulb size={16} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest">Master Reframe</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-800 italic font-medium leading-relaxed relative z-10">"{analysis.suggestions.alternativeThought}"</p>
|
||||
</div>
|
||||
<Tooltip content="A more balanced, evidence-based way to think about this specific moment in the interaction.">
|
||||
<div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm relative overflow-hidden group w-full">
|
||||
<div className="flex items-center gap-2 text-teal-600 mb-2">
|
||||
<Lightbulb size={16} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-800">Master Reframe</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-800 italic font-medium leading-relaxed relative z-10">"{analysis.suggestions.alternativeThought}"</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm">
|
||||
<div className="flex items-center gap-2 text-teal-600 mb-2">
|
||||
<TrendingUp size={16} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest">Tactical Pivot</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-800 leading-relaxed font-light">{analysis.suggestions.behavioralStep}</p>
|
||||
</div>
|
||||
<Tooltip content="Actionable behavioral advice to improve your communication or internal response in the next turn.">
|
||||
<div className="bg-white p-5 rounded-2xl border border-teal-100 shadow-sm w-full">
|
||||
<div className="flex items-center gap-2 text-teal-600 mb-2">
|
||||
<TrendingUp size={16} />
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-slate-800">Tactical Pivot</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-800 leading-relaxed font-light">{analysis.suggestions.behavioralStep}</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
Reference in new issue
Block a user