Merge pull request #372 from siiddhantt/main

Updated sources section according to Figma design
This commit is contained in:
Alex
2023-10-03 23:21:32 +01:00
committed by GitHub

View File

@@ -60,7 +60,7 @@ const ConversationBubble = forwardRef<
<div className="flex self-start">
<Avatar className="mt-2 text-2xl" avatar="🦖"></Avatar>
<div
className={`ml-2 mr-5 flex items-center rounded-3xl bg-gray-1000 p-3.5 ${
className={`ml-2 mr-5 flex flex-col items-center rounded-3xl bg-gray-1000 p-3.5 ${
type === 'ERROR'
? ' rounded-lg border border-red-2000 bg-red-1000 p-2 text-red-3000'
: ''
@@ -100,6 +100,43 @@ const ConversationBubble = forwardRef<
>
{message}
</ReactMarkdown>
{DisableSourceFE || type === 'ERROR' ? null : (
<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">
{DisableSourceFE || type === 'ERROR' ? null : (
<div className="py-1 px-2 text-base font-semibold">
Sources:
</div>
)}
<div className="flex flex-row flex-wrap items-center justify-start gap-2">
{DisableSourceFE
? null
: 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]'
}`}
onClick={() =>
setOpenSource(openSource === index ? null : index)
}
>
<p
className={`truncate text-center text-base font-medium ${
openSource === index
? 'text-white'
: 'text-[#007DFF]'
}`}
>
{index + 1}. {source.title}
</p>
</div>
))}
</div>
</div>
</div>
<div
className={`mr-2 flex items-center justify-center ${
@@ -134,23 +171,6 @@ const ConversationBubble = forwardRef<
></Dislike>
</div>
</div>
<div className="ml-8 mt-2 grid w-1/2 grid-cols-3 gap-2">
{DisableSourceFE
? null
: sources?.map((source, index) => (
<div
key={index}
className="w-26 cursor-pointer rounded-xl border border-gray-200 py-1 px-2 hover:bg-gray-100"
onClick={() =>
setOpenSource(openSource === index ? null : index)
}
>
<p className="truncate text-xs text-gray-500">
{index + 1}. {source.title}
</p>
</div>
))}
</div>
{sources && openSource !== null && sources[openSource] && (
<div className="ml-8 mt-2 w-3/4 rounded-xl bg-blue-200 p-2">