Skip to content

Commit

Permalink
Prevent unneccessary renders. Update show/hide state of feedback butt…
Browse files Browse the repository at this point in the history
…ons by css instead React
  • Loading branch information
krabbi committed Oct 16, 2023
1 parent 66f2e54 commit 0a717ae
Showing 1 changed file with 12 additions and 20 deletions.
32 changes: 12 additions & 20 deletions frontend/src/conversation/ConversationBubble.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const ConversationBubble = forwardRef<
{ message, type, className, feedback, handleFeedback, sources },
ref,
) {
const [showFeedback, setShowFeedback] = useState(false);
const [openSource, setOpenSource] = useState<number | null>(null);
const [copied, setCopied] = useState(false);

Expand Down Expand Up @@ -65,12 +64,7 @@ const ConversationBubble = forwardRef<
);
} else {
bubble = (
<div
ref={ref}
className={`flex self-start ${className} flex-col`}
onMouseEnter={() => setShowFeedback(true)}
onMouseLeave={() => setShowFeedback(false)}
>
<div ref={ref} className={`flex self-start ${className} group flex-col`}>
<div className="flex self-start">
<Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
<div
Expand Down Expand Up @@ -118,9 +112,7 @@ const ConversationBubble = forwardRef<
<>
<span className="mt-3 h-px w-full bg-[#DEDEDE]"></span>
<div className="mt-3 flex w-full flex-row flex-wrap items-center justify-start gap-2">
<div className="py-1 text-base font-semibold">
Sources:
</div>
<div className="py-1 text-base font-semibold">Sources:</div>
<div className="flex flex-row flex-wrap items-center justify-start gap-2">
{sources?.map((source, index) => (
<div
Expand Down Expand Up @@ -151,8 +143,8 @@ const ConversationBubble = forwardRef<
)}
</div>
<div
className={`relative mr-2 flex items-center justify-center ${
type !== 'ERROR' && showFeedback ? '' : 'md:invisible'
className={`relative mr-2 flex items-center justify-center md:invisible ${
type !== 'ERROR' ? 'group-hover:md:visible' : ''
}`}
>
{copied ? (
Expand All @@ -167,10 +159,10 @@ const ConversationBubble = forwardRef<
)}
</div>
<div
className={`relative mr-2 flex items-center justify-center ${
feedback === 'LIKE' || (type !== 'ERROR' && showFeedback)
? ''
: 'md:invisible'
className={`relative mr-2 flex items-center justify-center md:invisible ${
feedback === 'LIKE' || type !== 'ERROR'
? 'group-hover:md:visible'
: ''
}`}
>
<Like
Expand All @@ -183,10 +175,10 @@ const ConversationBubble = forwardRef<
></Like>
</div>
<div
className={`relative mr-10 flex items-center justify-center ${
feedback === 'DISLIKE' || (type !== 'ERROR' && showFeedback)
? ''
: 'md:invisible'
className={`relative mr-10 flex items-center justify-center md:invisible ${
feedback === 'DISLIKE' || type !== 'ERROR'
? 'group-hover:md:visible'
: ''
}`}
>
<Dislike
Expand Down

0 comments on commit 0a717ae

Please sign in to comment.