John Remillard
a4946ed04d
Introduces `characterName` to the `Scenario` type, enabling AI personas to be explicitly named. This change also updates the `ScenarioCard` component to display the character name and adds foundational support for potential future scenario deletion functionality. The README has been updated with a new AI Studio link.
35 lines
1013 B
TypeScript
35 lines
1013 B
TypeScript
|
|
import React from 'react';
|
|
import { Mic, MicOff, MessageSquare } from 'lucide-react';
|
|
|
|
interface VoiceControlsProps {
|
|
isMuted: boolean;
|
|
onToggleMute: () => void;
|
|
showTranscript: boolean;
|
|
onToggleTranscript: () => void;
|
|
}
|
|
|
|
const VoiceControls: React.FC<VoiceControlsProps> = ({
|
|
isMuted,
|
|
onToggleMute,
|
|
showTranscript,
|
|
onToggleTranscript
|
|
}) => (
|
|
<div className="p-8 flex justify-center gap-6 relative z-10 bg-black/20 backdrop-blur-md">
|
|
<button
|
|
onClick={onToggleMute}
|
|
className={`p-5 rounded-full transition-all ${isMuted ? 'bg-rose-600 text-white' : 'bg-white/10 text-white hover:bg-white/20'}`}
|
|
>
|
|
{isMuted ? <MicOff size={24} /> : <Mic size={24} />}
|
|
</button>
|
|
<button
|
|
onClick={onToggleTranscript}
|
|
className={`p-5 rounded-full transition-all ${showTranscript ? 'bg-teal-600 text-white' : 'bg-white/10 text-white hover:bg-white/20'}`}
|
|
>
|
|
<MessageSquare size={24} />
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
export default React.memo(VoiceControls);
|