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

refactored the divs, prevent overlap

Browse Source
This commit is contained in:
ManishMadan2882
2024-01-26 02:47:51 +05:30
parent a2f2b8fabc
commit 810dcb90ce
1 changed files with 78 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -65,7 +65,7 @@ const ConversationBubble = forwardRef<
ref={ref}
className={`flex self-start flex-wrap ${className} group flex-col pr-20 dark:text-bright-gray`}
>
<div className="flex self-start flex-wrap md:flex-nowrap">
<div className="flex self-start flex-wrap lg:flex-nowrap">
<Avatar
className="mt-2 h-12 w-12 text-2xl"
avatar={
@@ -191,95 +191,97 @@ const ConversationBubble = forwardRef<
</>
)}
</div>
<div
className={`relative mr-5 items-center justify-center lg:invisible block
<div className='flex justify-center'>
<div
className={`relative mr-5 items-center justify-center lg:invisible block
${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
}`}
>
<div className="absolute left-2 top-4">
<div
className={`flex items-center justify-center rounded-full p-2
}`}
>
<div className="absolute left-2 top-4">
<div
className={`flex items-center justify-center rounded-full p-2
${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
{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>
)}
>
{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>
<div
className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
} ${feedback === 'LIKE' || type !== 'ERROR'
? 'group-hover:lg:visible'
: ''
}`}
>
<div className="absolute left-6 top-4">
<div
className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Like
className={`cursor-pointer
<div
className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
} ${feedback === 'LIKE' || type !== 'ERROR'
? 'group-hover:lg:visible'
: ''
}`}
>
<div className="absolute left-6 top-4">
<div
className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Like
className={`cursor-pointer
${isLikeClicked || feedback === 'LIKE'
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
handleFeedback?.('LIKE');
setIsLikeClicked(true);
setIsDislikeClicked(false);
}}
onMouseEnter={() => setIsLikeHovered(true)}
onMouseLeave={() => setIsLikeHovered(false)}
></Like>
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
handleFeedback?.('LIKE');
setIsLikeClicked(true);
setIsDislikeClicked(false);
}}
onMouseEnter={() => setIsLikeHovered(true)}
onMouseLeave={() => setIsLikeHovered(false)}
></Like>
</div>
</div>
</div>
</div>
<div
className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
} ${feedback === 'DISLIKE' || type !== 'ERROR'
? 'group-hover:lg:visible'
: ''
}`}
>
<div className="absolute left-10 top-4">
<div
<div
className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
} ${feedback === 'DISLIKE' || type !== 'ERROR'
? 'group-hover:lg:visible'
: ''
}`}
>
<div className="absolute left-10 top-4">
<div
className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Dislike
className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
: 'fill-none stroke-gray-4000'
}`}
onClick={() => {
handleFeedback?.('DISLIKE');
setIsDislikeClicked(true);
setIsLikeClicked(false);
}}
onMouseEnter={() => setIsDislikeHovered(true)}
onMouseLeave={() => setIsDislikeHovered(false)}
></Dislike>
className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
>
<Dislike
className={`cursor-pointer ${isDislikeClicked || feedback === 'DISLIKE'
? 'fill-white-3000 dark:fill-transparent 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>
</div>
{sources && openSource !== null && sources[openSource] && (
<div className="ml-10 mt-2 max-w-[300px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
<div className="ml-10 mt-12 sm:mt-2 max-w-[300px] sm:max-w-[800px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
<p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
Source: {sources[openSource].title}
</p>