|
|
|
@ -63,9 +63,9 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
bubble = (
|
|
|
|
|
<div
|
|
|
|
|
ref={ref}
|
|
|
|
|
className={`flex self-start flex-wrap ${className} group flex-col pr-20 dark:text-bright-gray`}
|
|
|
|
|
className={`flex flex-wrap self-start ${className} group flex-col pr-20 dark:text-bright-gray`}
|
|
|
|
|
>
|
|
|
|
|
<div className="flex self-start flex-wrap lg:flex-nowrap">
|
|
|
|
|
<div className="flex flex-wrap self-start lg:flex-nowrap">
|
|
|
|
|
<Avatar
|
|
|
|
|
className="mt-2 h-12 w-12 text-2xl"
|
|
|
|
|
avatar={
|
|
|
|
@ -78,10 +78,11 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
className={`ml-2 lg:max-w-[50vw] md:max-w-[70vw] max-w-[90vw] mr-5 flex rounded-3xl bg-gray-1000 dark:bg-gun-metal p-3.5 ${type === 'ERROR'
|
|
|
|
|
? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
|
|
|
|
|
: 'flex-col rounded-3xl'
|
|
|
|
|
}`}
|
|
|
|
|
className={`ml-2 mr-5 flex max-w-[90vw] rounded-3xl bg-gray-1000 p-3.5 dark:bg-gun-metal md:max-w-[70vw] lg:max-w-[50vw] ${
|
|
|
|
|
type === 'ERROR'
|
|
|
|
|
? 'flex-row items-center rounded-full border border-transparent bg-[#FFE7E7] p-2 py-5 text-sm font-normal text-red-3000 dark:border-red-2000 dark:text-white'
|
|
|
|
|
: 'flex-col rounded-3xl'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{type === 'ERROR' && (
|
|
|
|
|
<img src={Alert} alt="alert" className="mr-2 inline" />
|
|
|
|
@ -168,19 +169,21 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
{sources?.map((source, index) => (
|
|
|
|
|
<div
|
|
|
|
|
key={index}
|
|
|
|
|
className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${openSource === index
|
|
|
|
|
? 'bg-[#007DFF]'
|
|
|
|
|
: 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
|
|
|
|
|
}`}
|
|
|
|
|
className={`max-w-fit cursor-pointer rounded-[28px] py-1 px-4 ${
|
|
|
|
|
openSource === index
|
|
|
|
|
? 'bg-[#007DFF]'
|
|
|
|
|
: 'bg-[#D7EBFD] hover:bg-[#BFE1FF]'
|
|
|
|
|
}`}
|
|
|
|
|
onClick={() =>
|
|
|
|
|
setOpenSource(openSource === index ? null : index)
|
|
|
|
|
}
|
|
|
|
|
>
|
|
|
|
|
<p
|
|
|
|
|
className={`truncate text-center text-base font-medium ${openSource === index
|
|
|
|
|
? 'text-white'
|
|
|
|
|
: 'text-[#007DFF]'
|
|
|
|
|
}`}
|
|
|
|
|
className={`truncate text-center text-base font-medium ${
|
|
|
|
|
openSource === index
|
|
|
|
|
? 'text-white'
|
|
|
|
|
: 'text-[#007DFF]'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{index + 1}. {source.title.substring(0, 45)}
|
|
|
|
|
</p>
|
|
|
|
@ -191,16 +194,19 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
<div className='flex justify-center'>
|
|
|
|
|
<div className="flex justify-center">
|
|
|
|
|
<div
|
|
|
|
|
className={`relative mr-5 items-center justify-center lg:invisible block
|
|
|
|
|
${type !== 'ERROR' ? 'group-hover:lg:visible' : ''
|
|
|
|
|
}`}
|
|
|
|
|
className={`relative mr-5 block items-center justify-center lg:invisible
|
|
|
|
|
${type !== 'ERROR' ? 'group-hover:lg:visible' : ''}`}
|
|
|
|
|
>
|
|
|
|
|
<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'}`}
|
|
|
|
|
${
|
|
|
|
|
isCopyHovered
|
|
|
|
|
? 'bg-[#EEEEEE] dark:bg-purple-taupe'
|
|
|
|
|
: 'bg-[#ffffff] dark:bg-transparent'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
{copied ? (
|
|
|
|
|
<CheckMark
|
|
|
|
@ -222,22 +228,29 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className={`relative mr-5 flex items-center justify-center ${!isLikeClicked ? 'lg:invisible' : ''
|
|
|
|
|
} ${feedback === 'LIKE' || type !== 'ERROR'
|
|
|
|
|
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'}`}
|
|
|
|
|
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'
|
|
|
|
|
}`}
|
|
|
|
|
${
|
|
|
|
|
isLikeClicked || feedback === 'LIKE'
|
|
|
|
|
? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
|
|
|
|
|
: 'fill-none stroke-gray-4000'
|
|
|
|
|
}`}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
handleFeedback?.('LIKE');
|
|
|
|
|
setIsLikeClicked(true);
|
|
|
|
@ -250,22 +263,28 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className={`mr-13 relative flex items-center justify-center ${!isDislikeClicked ? 'lg:invisible' : ''
|
|
|
|
|
} ${feedback === 'DISLIKE' || type !== 'ERROR'
|
|
|
|
|
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'}`}
|
|
|
|
|
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'
|
|
|
|
|
}`}
|
|
|
|
|
className={`cursor-pointer ${
|
|
|
|
|
isDislikeClicked || feedback === 'DISLIKE'
|
|
|
|
|
? 'fill-white-3000 stroke-red-2000 dark:fill-transparent'
|
|
|
|
|
: 'fill-none stroke-gray-4000'
|
|
|
|
|
}`}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
handleFeedback?.('DISLIKE');
|
|
|
|
|
setIsDislikeClicked(true);
|
|
|
|
@ -281,12 +300,12 @@ const ConversationBubble = forwardRef<
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{sources && openSource !== null && sources[openSource] && (
|
|
|
|
|
<div className="ml-10 mt-12 lg:mt-2 max-w-[300px] sm:max-w-[800px] break-words rounded-xl bg-blue-200 dark:bg-gun-metal p-2">
|
|
|
|
|
<div className="ml-10 mt-12 max-w-[300px] break-words rounded-xl bg-blue-200 p-2 dark:bg-gun-metal sm:max-w-[800px] lg:mt-2">
|
|
|
|
|
<p className="m-1 w-3/4 truncate text-xs text-gray-500 dark:text-bright-gray">
|
|
|
|
|
Source: {sources[openSource].title}
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div className="m-2 rounded-xl border-2 border-gray-200 dark:border-chinese-silver bg-white dark:bg-dark-charcoal p-2">
|
|
|
|
|
<div className="m-2 rounded-xl border-2 border-gray-200 bg-white p-2 dark:border-chinese-silver dark:bg-dark-charcoal">
|
|
|
|
|
<p className="text-break text-black dark:text-bright-gray">
|
|
|
|
|
{sources[openSource].text}
|
|
|
|
|
</p>
|
|
|
|
|