Align voice message button with send chat message button style

This commit is contained in:
Debanjum Singh Solanky 2024-08-04 19:44:57 +05:30
parent 70f670dcf7
commit b744dffefd

View file

@ -397,14 +397,14 @@ export default function ChatInputArea(props: ChatInputProps) {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
variant={'ghost'} variant='default'
className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`} className={`${!recording && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
onClick={() => { onClick={() => {
setRecording(!recording); setRecording(!recording);
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Stop weight='fill' className='w-8 h-8' /> <Stop weight='fill' className='w-6 h-6' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -421,15 +421,15 @@ export default function ChatInputArea(props: ChatInputProps) {
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
variant={'ghost'} variant='default'
className={`${message && 'hidden'} !bg-none p-0 m-2 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500`} className={`${(!message || recording) || 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
onClick={() => { onClick={() => {
setMessage("Listening..."); setMessage("Listening...");
setRecording(!recording); setRecording(!recording);
}} }}
disabled={props.sendDisabled} disabled={props.sendDisabled}
> >
<Microphone weight='fill' className='w-8 h-8' /> <Microphone weight='fill' className='w-6 h-6' />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
@ -440,7 +440,7 @@ export default function ChatInputArea(props: ChatInputProps) {
) )
} }
<Button <Button
className={`${!message && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`} className={`${(!message || recording) && 'hidden'} ${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 m-2 h-auto text-3xl transition transform md:hover:-translate-y-1`}
onClick={onSendMessage} onClick={onSendMessage}
disabled={props.sendDisabled}> disabled={props.sendDisabled}>
<ArrowUp className='w-6 h-6' weight='bold' /> <ArrowUp className='w-6 h-6' weight='bold' />