refactor: replaced ChatSources dialog with Sheet for better UI.

surfsense_web/components/chat/ChatSources.tsx

@@ -1,19 +1,29 @@
 "use client";
 
 import { getAnnotationData, type Message } from "@llamaindex/chat-ui";
-import { IconBrandGithub } from "@tabler/icons-react";
+import {
-import { ExternalLink, FileText, Globe } from "lucide-react";
+	IconBrandDiscord,
+	IconBrandGithub,
+	IconBrandNotion,
+	IconBrandSlack,
+	IconBrandYoutube,
+} from "@tabler/icons-react";
+import {
+	BookOpen,
+	Calendar,
+	CheckSquare,
+	ExternalLink,
+	FileText,
+	Globe,
+	Link2,
+	Mail,
+	Puzzle,
+} from "lucide-react";
 import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
-	Dialog,
-	DialogContent,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface Source {
@@ -46,15 +56,77 @@ interface SourceNode {
 
 function getSourceIcon(type: string) {
 	switch (type) {
+		// GitHub
 		case "USER_SELECTED_GITHUB_CONNECTOR":
 		case "GITHUB_CONNECTOR":
 			return <IconBrandGithub className="h-4 w-4" />;
+
+		// Notion
 		case "USER_SELECTED_NOTION_CONNECTOR":
 		case "NOTION_CONNECTOR":
-			return <FileText className="h-4 w-4" />;
+			return <IconBrandNotion className="h-4 w-4" />;
+
+		// Slack
+		case "USER_SELECTED_SLACK_CONNECTOR":
+		case "SLACK_CONNECTOR":
+			return <IconBrandSlack className="h-4 w-4" />;
+
+		// Discord
+		case "USER_SELECTED_DISCORD_CONNECTOR":
+		case "DISCORD_CONNECTOR":
+			return <IconBrandDiscord className="h-4 w-4" />;
+
+		// Google Calendar
+		case "USER_SELECTED_GOOGLE_CALENDAR_CONNECTOR":
+		case "GOOGLE_CALENDAR_CONNECTOR":
+			return <Calendar className="h-4 w-4" />;
+
+		// Google Gmail
+		case "USER_SELECTED_GOOGLE_GMAIL_CONNECTOR":
+		case "GOOGLE_GMAIL_CONNECTOR":
+			return <Mail className="h-4 w-4" />;
+
+		// YouTube
+		case "USER_SELECTED_YOUTUBE_VIDEO":
+		case "YOUTUBE_VIDEO":
+			return <IconBrandYoutube className="h-4 w-4" />;
+
+		// Linear
+		case "USER_SELECTED_LINEAR_CONNECTOR":
+		case "LINEAR_CONNECTOR":
+			return <CheckSquare className="h-4 w-4" />;
+
+		// Jira
+		case "USER_SELECTED_JIRA_CONNECTOR":
+		case "JIRA_CONNECTOR":
+			return <CheckSquare className="h-4 w-4" />;
+
+		// Confluence
+		case "USER_SELECTED_CONFLUENCE_CONNECTOR":
+		case "CONFLUENCE_CONNECTOR":
+			return <BookOpen className="h-4 w-4" />;
+
+		// ClickUp
+		case "USER_SELECTED_CLICKUP_CONNECTOR":
+		case "CLICKUP_CONNECTOR":
+			return <CheckSquare className="h-4 w-4" />;
+
+		// Files
 		case "USER_SELECTED_FILE":
 		case "FILE":
 			return <FileText className="h-4 w-4" />;
+
+		// Extension
+		case "USER_SELECTED_EXTENSION":
+		case "EXTENSION":
+			return <Puzzle className="h-4 w-4" />;
+
+		// Crawled URL
+		case "USER_SELECTED_CRAWLED_URL":
+		case "CRAWLED_URL":
+			return <Link2 className="h-4 w-4" />;
+
+		// Default for any other source type
 		default:
 			return <Globe className="h-4 w-4" />;
 	}
@@ -63,28 +135,34 @@ function getSourceIcon(type: string) {
 function SourceCard({ source }: { source: Source }) {
 	const hasUrl = source.url && source.url.trim() !== "";
 
+	// Clean up the description for better display
+	const cleanDescription = source.description
+		.replace(/## Metadata\n\n/g, "")
+		.replace(/\n+/g, " ")
+		.trim();
+
 	return (
-		<Card className="mb-3">
+		<Card className="border-muted hover:border-muted-foreground/20 transition-colors">
-			<CardHeader className="pb-2">
+			<CardHeader className="pb-3 pt-3">
 				<div className="flex items-start justify-between gap-2">
-					<CardTitle className="text-sm md:text-base font-medium leading-tight">
+					<CardTitle className="text-sm font-medium leading-tight line-clamp-2">
 						{source.title}
 					</CardTitle>
 					{hasUrl && (
 						<Button
 							variant="ghost"
 							size="sm"
-							className="h-6 w-6 md:h-8 md:w-8 p-0 flex-shrink-0"
+							className="h-7 w-7 p-0 flex-shrink-0 hover:bg-muted"
 							onClick={() => window.open(source.url, "_blank")}
 						>
-							<ExternalLink className="h-3 w-3 md:h-4 md:w-4" />
+							<ExternalLink className="h-3.5 w-3.5" />
 						</Button>
 					)}
 				</div>
 			</CardHeader>
-			<CardContent className="pt-0">
+			<CardContent className="pt-0 pb-3">
-				<CardDescription className="text-xs md:text-sm line-clamp-3 md:line-clamp-4 leading-relaxed">
+				<CardDescription className="text-xs line-clamp-3 leading-relaxed text-muted-foreground">
-					{source.description}
+					{cleanDescription}
 				</CardDescription>
 			</CardContent>
 		</Card>
@@ -147,28 +225,33 @@ export default function ChatSourcesDisplay({ message }: { message: Message }) {
 	const totalSources = sourceGroups.reduce((acc, group) => acc + group.sources.length, 0);
 
 	return (
-		<Dialog open={open} onOpenChange={setOpen}>
+		<Sheet open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
+			<SheetTrigger asChild>
 				<Button variant="outline" size="sm" className="w-fit">
 					<FileText className="h-4 w-4 mr-2" />
 					View Sources ({totalSources})
 				</Button>
-			</DialogTrigger>
+			</SheetTrigger>
-			<DialogContent className="max-w-4xl md:h-[80vh] h-[90vh] w-[95vw] md:w-auto flex flex-col">
+			<SheetContent className="w-[400px] sm:w-[480px] md:w-[540px] flex flex-col p-0 overflow-hidden">
-				<DialogHeader className="flex-shrink-0">
+				<SheetHeader className="px-6 py-4 border-b flex-shrink-0">
-					<DialogTitle>Sources</DialogTitle>
+					<div className="flex items-center justify-between">
-				</DialogHeader>
+						<SheetTitle className="text-lg font-semibold">Sources</SheetTitle>
+						<Badge variant="outline" className="font-normal">
+							{totalSources} {totalSources === 1 ? "source" : "sources"}
+						</Badge>
+					</div>
+				</SheetHeader>
 				<Tabs defaultValue={sourceGroups[0]?.type} className="flex-1 flex flex-col min-h-0">
-					<div className="flex-shrink-0 w-full overflow-x-auto">
+					<div className="flex-shrink-0 w-full overflow-x-auto px-6 pt-4 scrollbar-none">
-						<TabsList className="flex w-max min-w-full">
+						<TabsList className="flex w-max min-w-full bg-muted/50">
 							{sourceGroups.map((group) => (
 								<TabsTrigger
 									key={group.type}
 									value={group.type}
-									className="flex items-center gap-2 whitespace-nowrap px-3 md:px-4"
+									className="flex items-center gap-2 whitespace-nowrap px-3 data-[state=active]:bg-background data-[state=active]:shadow-sm"
 								>
 									{getSourceIcon(group.type)}
-									<span className="truncate max-w-[100px] md:max-w-none">{group.name}</span>
+									<span className="truncate max-w-[100px] sm:max-w-none">{group.name}</span>
 									<Badge variant="secondary" className="ml-1 h-5 text-xs flex-shrink-0">
 										{group.sources.length}
 									</Badge>
@@ -177,9 +260,13 @@ export default function ChatSourcesDisplay({ message }: { message: Message }) {
 						</TabsList>
 					</div>
 					{sourceGroups.map((group) => (
-						<TabsContent key={group.type} value={group.type} className="flex-1 min-h-0 mt-4">
+						<TabsContent
-							<div className="h-full overflow-y-auto pr-2">
+							key={group.type}
-								<div className="space-y-3">
+							value={group.type}
+							className="flex-1 min-h-0 mt-0 px-6 pb-6 data-[state=active]:flex data-[state=active]:flex-col"
+						>
+							<div className="h-full overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent">
+								<div className="space-y-3 pt-4">
 									{group.sources.map((source) => (
 										<SourceCard key={source.id} source={source} />
 									))}
@@ -188,7 +275,7 @@ export default function ChatSourcesDisplay({ message }: { message: Message }) {
 						</TabsContent>
 					))}
 				</Tabs>
-			</DialogContent>
+			</SheetContent>
-		</Dialog>
+		</Sheet>
 	);
 }