Evandro Fonseca Junior
f2e8a1b933
- Added custom scrollbar styles for sources display to improve aesthetics and usability. - Introduced animations for reasoning steps to enhance user experience during chat interactions. - Refactored chat page to group thinking messages, improving message handling and display. - Updated sources display component for better favicon handling and user interaction.
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { ExternalLink } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface Source {
|
|
url: string;
|
|
title?: string;
|
|
}
|
|
|
|
interface SourcesCompactProps {
|
|
sources: Source[];
|
|
className?: string;
|
|
}
|
|
|
|
export function SourcesCompact({ sources, className }: SourcesCompactProps) {
|
|
const getFaviconUrl = (url: string): string => {
|
|
try {
|
|
const domain = new URL(url).hostname;
|
|
return `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
|
|
} catch {
|
|
return '';
|
|
}
|
|
};
|
|
|
|
const getDomain = (url: string): string => {
|
|
try {
|
|
return new URL(url).hostname.replace(/^www\./, '');
|
|
} catch {
|
|
return url.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0];
|
|
}
|
|
};
|
|
|
|
if (!sources || sources.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex gap-3 overflow-x-auto py-2 sources-scrollbar", className)}>
|
|
{sources.map((source, idx) => {
|
|
const faviconUrl = getFaviconUrl(source.url);
|
|
const domain = getDomain(source.url);
|
|
|
|
return (
|
|
<a
|
|
key={idx}
|
|
href={source.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/30 hover:bg-muted/50 border border-transparent hover:border-muted transition-all flex-shrink-0"
|
|
>
|
|
{faviconUrl ? (
|
|
<img
|
|
src={faviconUrl}
|
|
alt=""
|
|
className="w-4 h-4 rounded flex-shrink-0"
|
|
onError={(e) => {
|
|
(e.target as HTMLImageElement).style.display = 'none';
|
|
}}
|
|
/>
|
|
) : (
|
|
<ExternalLink className="w-4 h-4 text-muted-foreground/60 flex-shrink-0" />
|
|
)}
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-medium truncate max-w-[140px] text-foreground/90">
|
|
{source.title || domain}
|
|
</div>
|
|
<div className="text-[10px] text-muted-foreground truncate">
|
|
{domain}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|