Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-08 03:28:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

✨ WIP: Implement Realtime Ephemeral Token functionality and update related components

Browse source
This commit is contained in:
Marco Beretta 2024-12-19 14:58:15 +01:00 • committed by Danny Avila
parent 12d7028a18
commit 6b90817ae0
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
12 changed files with 213 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

51
client/src/components/Chat/Input/SendButton.tsx
View file

@ -1,7 +1,10 @@
import React, { forwardRef } from 'react';
import { useWatch } from 'react-hook-form';
import type { TRealtimeEphemeralTokenResponse } from 'librechat-data-provider';
import type { Control } from 'react-hook-form';
import { useRealtimeEphemeralTokenMutation } from '~/data-provider';
import { TooltipAnchor, SendIcon, CallIcon } from '~/components';
import { useToastContext } from '~/Providers/ToastContext';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
@ -17,6 +20,7 @@ const ActionButton = forwardRef(
icon: React.ReactNode;
tooltip: string;
testId: string;
onClick?: () => void;
},
ref: React.ForwardedRef<HTMLButtonElement>,
) => {
@ -36,6 +40,7 @@ const ActionButton = forwardRef(
)}
data-testid={props.testId}
type="submit"
onClick={props.onClick}
>
<span className="" data-state="closed">
{props.icon}
@ -49,19 +54,43 @@ const ActionButton = forwardRef(
const SendButton = forwardRef((props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
const localize = useLocalize();
const { text } = useWatch({ control: props.control });
const { showToast } = useToastContext();
const { text = '' } = useWatch({ control: props.control });
const buttonProps = text
? {
icon: <SendIcon size={24} />,
tooltip: localize('com_nav_send_message'),
testId: 'send-button',
const { mutate: startCall, isLoading: isProcessing } = useRealtimeEphemeralTokenMutation({
onSuccess: async (data: TRealtimeEphemeralTokenResponse) => {
showToast({
message: 'IT WORKS!!',
status: 'success',
});
},
onError: (error: unknown) => {
showToast({
message: localize('com_nav_audio_process_error', (error as Error).message),
status: 'error',
});
},
});
const handleClick = () => {
if (text.trim() === '') {
startCall({ voice: 'verse' });
}
: {
icon: <CallIcon size={24} />,
tooltip: localize('com_nav_call'),
testId: 'call-button',
};
};
const buttonProps =
text.trim() !== ''
? {
icon: <SendIcon size={24} />,
tooltip: localize('com_nav_send_message'),
testId: 'send-button',
}
: {
icon: <CallIcon size={24} />,
tooltip: localize('com_nav_call'),
testId: 'call-button',
onClick: handleClick,
};
return <ActionButton ref={ref} disabled={props.disabled} {...buttonProps} />;
});