mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-29 08:33:20 +00:00
Merge pull request #672 from Ankit-Matth/revamp_icon_effects
[feature] : The UI of the feedback icons has been changed.
This commit is contained in:
Alex
@@ -1,3 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="11" viewBox="0 0 14 11" fill="none">
|
||||
<path d="M4.95919 10.1906C4.84318 10.1902 4.72847 10.166 4.62222 10.1194C4.51596 10.0729 4.42041 10.0049 4.34152 9.91985L0.229353 5.54538C0.0756344 5.38157 -0.00671208 5.1634 0.000428491 4.93886C0.00756906 4.71433 0.103612 4.50183 0.267428 4.34812C0.431245 4.1944 0.649417 4.11205 0.873948 4.11919C1.09848 4.12633 1.31098 4.22238 1.4647 4.38619L4.95073 8.10068L12.0666 0.316329C12.1389 0.226405 12.2287 0.152193 12.3306 0.0982513C12.4326 0.0443098 12.5445 0.0117775 12.6594 0.00265255C12.7744 -0.00647237 12.89 0.00800286 12.9992 0.045189C13.1084 0.082375 13.2088 0.141487 13.2943 0.218894C13.3798 0.296301 13.4485 0.390369 13.4964 0.49532C13.5442 0.600272 13.57 0.713891 13.5723 0.829198C13.5746 0.944506 13.5534 1.05907 13.5098 1.16585C13.4662 1.27263 13.4012 1.36937 13.3189 1.45014L5.58533 9.91139C5.50718 9.998 5.41197 10.0675 5.30567 10.1156C5.19938 10.1636 5.0843 10.1892 4.96766 10.1906H4.95919Z" fill="#747474"/>
|
||||
</svg>
|
||||
<svg width="16px" height="16px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#11ee1c" stroke="#11ee1c" stroke-width="83.96799999999999"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M866.133333 258.133333L362.666667 761.6l-204.8-204.8L98.133333 618.666667 362.666667 881.066667l563.2-563.2z" fill="#11ee1c"></path></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 490 B |
@@ -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>
|
||||
|
||||
|
||||
@@ -28,6 +28,9 @@ module.exports = {
|
||||
'purple-30': '#7D54D1',
|
||||
'blue-4000': 'rgba(0, 125, 255, 0.36)',
|
||||
'blue-5000': 'rgba(0, 125, 255)',
|
||||
'green-2000': '#0FFF50',
|
||||
'light-gray': '#edeef0',
|
||||
'white-3000': '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user