LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-29 08:33:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #672 from Ankit-Matth/revamp_icon_effects

Browse Source 
[feature] : The UI of the feedback icons has been changed.
This commit is contained in:
Alex
2023-10-25 22:29:50 +01:00
committed by GitHub
parent 799c306138 7a2e6e640d
commit c4176af1ea
3 changed files with 103 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
frontend/src/conversation/ConversationBubble.tsx
View File

@@ -37,8 +37,13 @@ const ConversationBubble = forwardRef<
// Reset copied to false after a few seconds
setTimeout(() => {
setCopied(false);
}, 2000);
}, 3000);
};
const [isCopyHovered, setIsCopyHovered] = useState(false);
const [isLikeHovered, setIsLikeHovered] = useState(false);
const [isDislikeHovered, setIsDislikeHovered] = useState(false);
const [isLikeClicked, setIsLikeClicked] = useState(false);
const [isDislikeClicked, setIsDislikeClicked] = useState(false);
let bubble;
@@ -55,7 +60,10 @@ const ConversationBubble = forwardRef<
);
} else {
bubble = (
<div ref={ref} className={`flex self-start ${className} group flex-col`}>
<div
ref={ref}
className={`flex self-start ${className} group flex-col pr-20`}
>
<div className="flex self-start">
<Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
<div
@@ -146,52 +154,113 @@ const ConversationBubble = forwardRef<
)}
</div>
<div
className={`relative mr-2 flex items-center justify-center md:invisible ${
className={`relative mr-5 flex items-center justify-center md:invisible ${
type !== 'ERROR' ? 'group-hover:md:visible' : ''
}`}
>
{copied ? (
<Checkmark className="absolute left-2 top-4" />
) : (
<Copy
className={`absolute left-2 top-4 cursor-pointer fill-gray-4000 hover:stroke-gray-4000`}
onClick={() => {
handleCopyClick(message);
<div className="absolute left-2 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
}}
></Copy>
)}
>
{copied ? (
<Checkmark
className="cursor-pointer stroke-green-2000"
onMouseEnter={() => setIsCopyHovered(true)}
onMouseLeave={() => setIsCopyHovered(false)}
/>
) : (
<Copy
className={`cursor-pointer fill-none`}
onClick={() => {
handleCopyClick(message);
}}
onMouseEnter={() => setIsCopyHovered(true)}
onMouseLeave={() => setIsCopyHovered(false)}
></Copy>
)}
</div>
</div>
</div>
<div
className={`relative mr-2 flex items-center justify-center md:invisible ${
className={`relative mr-5 flex items-center justify-center ${
!isLikeClicked ? 'md:invisible' : ''
} ${
feedback === 'LIKE' || type !== 'ERROR'
? 'group-hover:md:visible'
: ''
}`}
>
<Like
className={`absolute left-6 top-4 cursor-pointer ${
feedback === 'LIKE'
? 'fill-purple-30 stroke-purple-30'
: 'fill-none stroke-gray-4000 hover:fill-gray-4000'
}`}
onClick={() => handleFeedback?.('LIKE')}
></Like>
<div className="absolute left-6 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isLikeHovered
? isLikeClicked
? '#7D54D1'
: '#EEEEEE'
: isLikeClicked
? '#7D54D1'
: '#ffffff',
}}
>
<Like
className={`cursor-pointer ${
isLikeClicked || (feedback === 'LIKE')
? 'fill-white-3000 stroke-purple-30'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
handleFeedback?.('LIKE');
setIsLikeClicked(true);
setIsDislikeClicked(false);
}}
onMouseEnter={() => setIsLikeHovered(true)}
onMouseLeave={() => setIsLikeHovered(false)}
></Like>
</div>
</div>
</div>
<div
className={`relative mr-10 flex items-center justify-center md:invisible ${
className={`mr-13 relative flex items-center justify-center ${
!isDislikeClicked ? 'md:invisible' : ''
} ${
feedback === 'DISLIKE' || type !== 'ERROR'
? 'group-hover:md:visible'
: ''
}`}
>
<Dislike
className={`absolute left-10 top-4 cursor-pointer ${
feedback === 'DISLIKE'
? 'fill-red-2000 stroke-red-2000'
: 'fill-none stroke-gray-4000 hover:fill-gray-4000'
}`}
onClick={() => handleFeedback?.('DISLIKE')}
></Dislike>
<div className="absolute left-10 top-4">
<div
className="flex items-center justify-center rounded-full p-2"
style={{
backgroundColor: isDislikeHovered
? isDislikeClicked
? '#F87171'
: '#EEEEEE'
: isDislikeClicked
? '#F87171'
: '#ffffff',
}}
>
<Dislike
className={`cursor-pointer ${
isDislikeClicked || (feedback === 'DISLIKE')
? 'fill-white-3000 stroke-red-2000'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
handleFeedback?.('DISLIKE');
setIsDislikeClicked(true);
setIsLikeClicked(false);
}}
onMouseEnter={() => setIsDislikeHovered(true)}
onMouseLeave={() => setIsDislikeHovered(false)}
></Dislike>
</div>
</div>
</div>
</div>