Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-21 10:50:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ feat: enhance call functionality with VAD integration and mute handling

Browse source
This commit is contained in:
Marco Beretta 2025-01-04 01:55:47 +01:00 • committed by Danny Avila
parent 7aed891838
commit c768b8feb1
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
7 changed files with 316 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/Chat/Input/Call.tsx
View file

@ -26,11 +26,12 @@ export const Call: React.FC = () => {
localStream,
remoteStream,
connectionQuality,
isMuted,
toggleMute,
} = useCall();
const [open, setOpen] = useRecoilState(store.callDialogOpen(0));
const [eventLog, setEventLog] = React.useState<string[]>([]);
const [isMuted, setIsMuted] = React.useState(false);
const [isAudioEnabled, setIsAudioEnabled] = React.useState(true);
const remoteAudioRef = useRef<HTMLAudioElement>(null);
@ -84,8 +85,8 @@ export const Call: React.FC = () => {
hangUp();
};
const toggleMute = () => {
setIsMuted((prev) => !prev);
const handleToggleMute = () => {
toggleMute();
logEvent(`Microphone ${isMuted ? 'unmuted' : 'muted'}`);
};
@ -176,7 +177,7 @@ export const Call: React.FC = () => {
{isActive && (
<>
<Button
onClick={toggleMute}
onClick={handleToggleMute}
className={`rounded-full p-3 ${
isMuted ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700'
}`}
@ -218,25 +219,19 @@ export const Call: React.FC = () => {
</div>
{/* Event Log */}
<div className="mt-4 w-full rounded-md bg-gray-100 p-4 shadow-sm">
<h3 className="mb-2 text-lg font-medium">Event Log</h3>
<div className="h-32 overflow-y-auto rounded-md bg-white p-2 shadow-inner">
<ul className="space-y-1 text-xs text-gray-600">
{eventLog.map((log, index) => (
<li key={index} className="font-mono">
{log}
</li>
))}
</ul>
</div>
<h3 className="mb-2 text-lg font-medium">Event Log</h3>
<div className="h-64 overflow-y-auto rounded-md bg-surface-secondary p-2 shadow-inner">
<ul className="space-y-1 text-xs text-text-secondary">
{eventLog.map((log, index) => (
<li key={index} className="font-mono">
{log}
</li>
))}
</ul>
</div>
{/* Hidden Audio Element */}
<audio
ref={remoteAudioRef}
autoPlay
playsInline
>
<audio ref={remoteAudioRef} autoPlay>
<track kind="captions" />
</audio>
</div>