Skip to content

Commit c682737

Browse files
dartpaindartpain
authored
Merge pull request #1920 from hanzalahwaheed/fix/response-bubble-btns
fix: always show the response bubble buttons.
2 parents f94a093 + 6bb0cd5 commit c682737

1 file changed

Lines changed: 59 additions & 93 deletions

File tree

‎frontend/src/conversation/ConversationBubble.tsx‎

Lines changed: 59 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,7 @@ const ConversationBubble = forwardRef<
9292
const [editInputBox, setEditInputBox] = useState<string>('');
9393
const messageRef = useRef<HTMLDivElement>(null);
9494
const [shouldShowToggle, setShouldShowToggle] = useState(false);
95-
const [isLikeClicked, setIsLikeClicked] = useState(false);
96-
const [isDislikeClicked, setIsDislikeClicked] = useState(false);
95+
9796
const [activeTooltip, setActiveTooltip] = useState<number | null>(null);
9897
const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
9998
const editableQueryRef = useRef<HTMLDivElement>(null);
@@ -550,104 +549,71 @@ const ConversationBubble = forwardRef<
550549
)}
551550
{message && (
552551
<div className="my-2 ml-2 flex justify-start">
553-
<div
554-
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
555-
>
556-
<div>
557-
<CopyButton textToCopy={message} />
558-
</div>
559-
</div>
560-
<div
561-
className={`relative mr-2 block items-center justify-center lg:invisible ${type !== 'ERROR' ? 'lg:group-hover:visible' : 'hidden'}`}
562-
>
563-
<div>
564-
<SpeakButton text={message} />
565-
</div>
566-
</div>
567-
{type === 'ERROR' && (
552+
{type === 'ERROR' ? (
568553
<div className="relative mr-2 block items-center justify-center">
569554
<div>{retryBtn}</div>
570555
</div>
571-
)}
572-
{handleFeedback && (
556+
) : (
573557
<>
574-
<div
575-
className={`relative mr-2 flex items-center justify-center ${
576-
feedback === 'LIKE' || isLikeClicked
577-
? 'visible'
578-
: 'lg:invisible'
579-
} ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'DISLIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
580-
>
581-
<div>
582-
<div
583-
className={`flex items-center justify-center rounded-full p-2 ${
584-
isLikeHovered
585-
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
586-
: 'bg-white-3000 dark:bg-transparent'
587-
}`}
588-
>
589-
<Like
590-
className={`cursor-pointer ${
591-
isLikeClicked || feedback === 'LIKE'
592-
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
593-
: 'stroke-gray-4000 fill-none'
594-
}`}
595-
onClick={() => {
596-
if (feedback === undefined || feedback === null) {
597-
handleFeedback?.('LIKE');
598-
setIsLikeClicked(true);
599-
setIsDislikeClicked(false);
600-
} else if (feedback === 'LIKE') {
601-
handleFeedback?.(null);
602-
setIsLikeClicked(false);
603-
setIsDislikeClicked(false);
604-
}
605-
}}
606-
onMouseEnter={() => setIsLikeHovered(true)}
607-
onMouseLeave={() => setIsLikeHovered(false)}
608-
></Like>
609-
</div>
610-
</div>
558+
<div className="relative mr-2 block items-center justify-center">
559+
<CopyButton textToCopy={message} />
560+
</div>
561+
<div className="relative mr-2 block items-center justify-center">
562+
<SpeakButton text={message} />
611563
</div>
564+
{handleFeedback && (
565+
<>
566+
<div className="relative mr-2 flex items-center justify-center">
567+
<div>
568+
<div
569+
className={`flex items-center justify-center rounded-full p-2 ${
570+
isLikeHovered
571+
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
572+
: 'bg-white-3000 dark:bg-transparent'
573+
}`}
574+
>
575+
<Like
576+
className={`${feedback === 'LIKE' ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
577+
onClick={() => {
578+
if (feedback === 'LIKE') {
579+
handleFeedback?.(null);
580+
} else {
581+
handleFeedback?.('LIKE');
582+
}
583+
}}
584+
onMouseEnter={() => setIsLikeHovered(true)}
585+
onMouseLeave={() => setIsLikeHovered(false)}
586+
></Like>
587+
</div>
588+
</div>
589+
</div>
612590

613-
<div
614-
className={`relative mr-2 flex items-center justify-center ${
615-
feedback === 'DISLIKE' || isLikeClicked
616-
? 'visible'
617-
: 'lg:invisible'
618-
} ${type !== 'ERROR' ? 'lg:group-hover:visible' : ''} ${feedback === 'LIKE' && type !== 'ERROR' ? 'hidden' : ''}`}
619-
>
620-
<div>
621-
<div
622-
className={`flex items-center justify-center rounded-full p-2 ${
623-
isDislikeHovered
624-
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
625-
: 'bg-white-3000 dark:bg-transparent'
626-
}`}
627-
>
628-
<Dislike
629-
className={`cursor-pointer ${
630-
isDislikeClicked || feedback === 'DISLIKE'
631-
? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
632-
: 'stroke-gray-4000 fill-none'
633-
}`}
634-
onClick={() => {
635-
if (feedback === undefined || feedback === null) {
636-
handleFeedback?.('DISLIKE');
637-
setIsDislikeClicked(true);
638-
setIsLikeClicked(false);
639-
} else if (feedback === 'DISLIKE') {
640-
handleFeedback?.(null);
641-
setIsLikeClicked(false);
642-
setIsDislikeClicked(false);
643-
}
644-
}}
645-
onMouseEnter={() => setIsDislikeHovered(true)}
646-
onMouseLeave={() => setIsDislikeHovered(false)}
647-
></Dislike>
591+
<div className="relative mr-2 flex items-center justify-center">
592+
<div>
593+
<div
594+
className={`flex items-center justify-center rounded-full p-2 ${
595+
isDislikeHovered
596+
? 'dark:bg-purple-taupe bg-[#EEEEEE]'
597+
: 'bg-white-3000 dark:bg-transparent'
598+
}`}
599+
>
600+
<Dislike
601+
className={`${feedback === 'DISLIKE' ? 'fill-white-3000 stroke-red-2000 dark:fill-transparent' : 'stroke-gray-4000 fill-none'} cursor-pointer`}
602+
onClick={() => {
603+
if (feedback === 'DISLIKE') {
604+
handleFeedback?.(null);
605+
} else {
606+
handleFeedback?.('DISLIKE');
607+
}
608+
}}
609+
onMouseEnter={() => setIsDislikeHovered(true)}
610+
onMouseLeave={() => setIsDislikeHovered(false)}
611+
></Dislike>
612+
</div>
613+
</div>
648614
</div>
649-
</div>
650-
</div>
615+
</>
616+
)}
651617
</>
652618
)}
653619
</div>

0 commit comments

Comments
 (0)