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

(feat:source_cards) enhance ux

Browse Source
This commit is contained in:
ManishMadan2882
2025-05-17 00:15:42 +05:30
parent 8d7236b0db
commit 68a5a3d62a
1 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -649,50 +649,68 @@ const ConversationBubble = forwardRef<
});
type AllSourcesProps = {
sources: { title: string; text: string; source: string }[];
sources: { title: string; text: string; link?: string }[];
};
function AllSources(sources: AllSourcesProps) {
const { t } = useTranslation();
const handleCardClick = (link: string) => {
if (link && link !== 'local') {
window.open(link, '_blank', 'noopener,noreferrer');
}
};
return (
<div className="h-full w-full">
<div className="w-full">
<p className="text-left text-xl">{`${sources.sources.length} Sources`}</p>
<p className="text-left text-xl">{`${sources.sources.length} ${t('conversation.sources.title')}`}</p>
<div className="mx-1 mt-2 h-[0.8px] w-full rounded-full bg-[#C4C4C4]/40 lg:w-[95%]"></div>
</div>
<div className="mt-6 flex h-[90%] w-60 flex-col items-center gap-4 overflow-y-auto sm:w-80">
{sources.sources.map((source, index) => (
<div
key={index}
className="w-full rounded-[20px] bg-gray-1000 p-4 dark:bg-[#28292E]"
>
<span className="flex flex-row">
<p
title={source.title}
className="ellipsis-text break-words text-left text-sm font-semibold"
>
{`${index + 1}. ${source.title}`}
{sources.sources.map((source, index) => {
const isExternalSource = source.link && source.link !== 'local';
return (
<div
key={index}
className={`group/card relative w-full rounded-[20px] bg-gray-1000 p-4 transition-colors hover:bg-[#F1F1F1] dark:bg-[#28292E] dark:hover:bg-[#2C2E3C] ${
isExternalSource ? 'cursor-pointer' : ''
}`}
onClick={() =>
isExternalSource && source.link && handleCardClick(source.link)
}
>
{isExternalSource && (
<div className="absolute right-2.5 top-2.5">
<img
src={Link}
alt="External Link"
className="h-2.5 w-2.5 object-fill opacity-60 hover:opacity-100 dark:invert"
/>
</div>
)}
<span className="flex flex-row">
<p
title={source.title}
className={`ellipsis-text break-words text-left text-sm font-semibold ${
isExternalSource
? 'group-hover/card:text-purple-30 dark:group-hover/card:text-[#8C67D7]'
: ''
}`}
>
{`${index + 1}. ${source.title}`}
</p>
</span>
<p className="mt-3 line-clamp-4 break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
{source.text}
</p>
{source.source && source.source !== 'local' ? (
<img
src={Link}
alt={'Link'}
className="h-3 w-3 cursor-pointer object-fill"
onClick={() =>
window.open(source.source, '_blank', 'noopener, noreferrer')
}
></img>
) : null}
</span>
<p className="mt-3 line-clamp-4 break-words rounded-md text-left text-xs text-black dark:text-chinese-silver">
{source.text}
</p>
</div>
))}
</div>
);
})}
</div>
</div>
);
}
export default ConversationBubble;
function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {