Skip to content

Commit a95174c

Browse files
Jasonxia007Jasonxia007
committed
♻️ Delete Radix UI Dependency: Tabs
1 parent b392c02 commit a95174c

File tree

2 files changed

+115
-157
lines changed

2 files changed

+115
-157
lines changed

‎frontend/app/[locale]/chat/components/chatRightPanel.tsx‎

Lines changed: 115 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,12 @@ import { useTranslation } from "react-i18next";
33
import { ExternalLink, Database, X, Server } from "lucide-react";
44

55
import { Button } from "@/components/ui/button";
6-
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
76
import { StaticScrollArea } from "@/components/ui/scrollArea";
87
import { ImageItem, ChatRightPanelProps, SearchResult } from "@/types/chat";
98
import { API_ENDPOINTS } from "@/services/api";
109
import { formatDate, formatUrl } from "@/lib/utils";
1110
import { convertImageUrlToApiUrl, extractObjectNameFromUrl, storageService } from "@/services/storageService";
12-
import { message } from "antd";
11+
import { message, Tabs } from "antd";
1312
import log from "@/lib/logger";
1413

1514

@@ -535,116 +534,130 @@ export function ChatRightPanel({
535534
</div>
536535

537536
<Tabs
538-
defaultValue="sources"
537+
defaultActiveKey="sources"
539538
className="flex-1 flex flex-col overflow-hidden"
540539
style={{ maxWidth: "400px" }}
541-
>
542-
<TabsList className="w-full" style={{ maxWidth: "400px" }}>
543-
<TabsTrigger value="sources" className="flex-1">
544-
{t("chatRightPanel.sources")}
545-
{searchResults.length > 0 && (
546-
<span className="ml-1 bg-gray-200 inline-flex items-center justify-center rounded px-1 text-xs font-medium min-w-[20px] h-[18px]">
547-
{searchResults.length}
548-
</span>
549-
)}
550-
</TabsTrigger>
551-
<TabsTrigger value="images" className="flex-1">
552-
{t("chatRightPanel.images")}
553-
{processedImages.length > 0 && (
554-
<span className="ml-1 bg-gray-200 inline-flex items-center justify-center rounded px-1 text-xs font-medium min-w-[20px] h-[18px]">
555-
{processedImages.length}
540+
items={[
541+
{
542+
key: "sources",
543+
label: (
544+
<span className="flex items-center justify-center px-3 py-1.5 text-sm font-medium">
545+
{t("chatRightPanel.sources")}
546+
{searchResults.length > 0 && (
547+
<span className="ml-1 bg-gray-200 inline-flex items-center justify-center rounded px-1 text-xs font-medium min-w-[20px] h-[18px]">
548+
{searchResults.length}
549+
</span>
550+
)}
556551
</span>
557-
)}
558-
</TabsTrigger>
559-
</TabsList>
560-
561-
<StaticScrollArea
562-
className="flex-1"
563-
style={{ maxWidth: "400px", overflow: "hidden" }}
564-
>
565-
<TabsContent
566-
value="sources"
567-
className="p-4"
568-
style={{ maxWidth: "400px", overflow: "hidden" }}
569-
>
570-
<div
571-
className="space-y-2"
572-
style={{ maxWidth: "100%", overflow: "hidden" }}
573-
>
574-
{searchResults.length > 0 ? (
575-
<>
552+
),
553+
children: (
554+
<StaticScrollArea
555+
className="flex-1"
556+
style={{ maxWidth: "400px", overflow: "hidden" }}
557+
>
558+
<div
559+
className="p-4"
560+
style={{ maxWidth: "400px", overflow: "hidden" }}
561+
>
576562
<div
577-
className="space-y-3"
563+
className="space-y-2"
578564
style={{ maxWidth: "100%", overflow: "hidden" }}
579565
>
580-
{searchResults.map((result, index) => (
581-
<SearchResultItem
582-
key={`result-${index}`}
583-
result={result}
584-
/>
585-
))}
566+
{searchResults.length > 0 ? (
567+
<>
568+
<div
569+
className="space-y-3"
570+
style={{ maxWidth: "100%", overflow: "hidden" }}
571+
>
572+
{searchResults.map((result, index) => (
573+
<SearchResultItem
574+
key={`result-${index}`}
575+
result={result}
576+
/>
577+
))}
578+
</div>
579+
</>
580+
) : (
581+
<div className="text-center text-gray-500 py-4 text-base">
582+
{t("chatRightPanel.noSearchResults")}
583+
</div>
584+
)}
586585
</div>
587-
</>
588-
) : (
589-
<div className="text-center text-gray-500 py-4 text-base">
590-
{t("chatRightPanel.noSearchResults")}
591586
</div>
592-
)}
593-
</div>
594-
</TabsContent>
595-
596-
<TabsContent
597-
value="images"
598-
className="p-4"
599-
style={{ maxWidth: "400px", overflow: "hidden" }}
600-
>
601-
{processedImages.length > 0 ? (
602-
<>
603-
<div className="grid grid-cols-2 gap-2">
604-
{processedImages
605-
.slice(0, expandedImages ? undefined : maxInitialImages)
606-
.map((imageUrl: string, index: number) => (
607-
<div
608-
key={`img-${index}`}
609-
className="relative border rounded-md overflow-hidden hover:border-blue-500 transition-colors cursor-pointer"
610-
onClick={() => handleImageClick(imageUrl)}
611-
>
612-
{renderImage(imageUrl, index)}
587+
</StaticScrollArea>
588+
),
589+
},
590+
{
591+
key: "images",
592+
label: (
593+
<span className="flex items-center justify-center px-3 py-1.5 text-sm font-medium">
594+
{t("chatRightPanel.images")}
595+
{processedImages.length > 0 && (
596+
<span className="ml-1 bg-gray-200 inline-flex items-center justify-center rounded px-1 text-xs font-medium min-w-[20px] h-[18px]">
597+
{processedImages.length}
598+
</span>
599+
)}
600+
</span>
601+
),
602+
children: (
603+
<StaticScrollArea
604+
className="flex-1"
605+
style={{ maxWidth: "400px", overflow: "hidden" }}
606+
>
607+
<div
608+
className="p-4"
609+
style={{ maxWidth: "400px", overflow: "hidden" }}
610+
>
611+
{processedImages.length > 0 ? (
612+
<>
613+
<div className="grid grid-cols-2 gap-2">
614+
{processedImages
615+
.slice(0, expandedImages ? undefined : maxInitialImages)
616+
.map((imageUrl: string, index: number) => (
617+
<div
618+
key={`img-${index}`}
619+
className="relative border rounded-md overflow-hidden hover:border-blue-500 transition-colors cursor-pointer"
620+
onClick={() => handleImageClick(imageUrl)}
621+
>
622+
{renderImage(imageUrl, index)}
623+
</div>
624+
))}
613625
</div>
614-
))}
615-
</div>
616626

617-
{processedImages.length > maxInitialImages && (
618-
<div className="mt-4 text-center">
619-
<Button
620-
variant="outline"
621-
size="sm"
622-
onClick={() => setExpandedImages(!expandedImages)}
623-
className="w-full"
624-
>
625-
{expandedImages
626-
? t("chatRightPanel.collapseImages")
627-
: t("chatRightPanel.expandImages", {
628-
count: processedImages.length,
629-
})}
630-
</Button>
631-
</div>
632-
)}
633-
</>
634-
) : (
635-
<div className="flex flex-col items-center justify-center p-6 text-center min-h-[200px]">
636-
<Database className="h-12 w-12 text-muted-foreground/40 mb-4" />
637-
<p className="text-lg font-medium mb-2">
638-
{t("chatRightPanel.noImages")}
639-
</p>
640-
<p className="text-sm text-muted-foreground">
641-
{t("chatRightPanel.noAssociatedImages")}
642-
</p>
643-
</div>
644-
)}
645-
</TabsContent>
646-
</StaticScrollArea>
647-
</Tabs>
627+
{processedImages.length > maxInitialImages && (
628+
<div className="mt-4 text-center">
629+
<Button
630+
variant="outline"
631+
size="sm"
632+
onClick={() => setExpandedImages(!expandedImages)}
633+
className="w-full"
634+
>
635+
{expandedImages
636+
? t("chatRightPanel.collapseImages")
637+
: t("chatRightPanel.expandImages", {
638+
count: processedImages.length,
639+
})}
640+
</Button>
641+
</div>
642+
)}
643+
</>
644+
) : (
645+
<div className="flex flex-col items-center justify-center p-6 text-center min-h-[200px]">
646+
<Database className="h-12 w-12 text-muted-foreground/40 mb-4" />
647+
<p className="text-lg font-medium mb-2">
648+
{t("chatRightPanel.noImages")}
649+
</p>
650+
<p className="text-sm text-muted-foreground">
651+
{t("chatRightPanel.noAssociatedImages")}
652+
</p>
653+
</div>
654+
)}
655+
</div>
656+
</StaticScrollArea>
657+
),
658+
},
659+
]}
660+
/>
648661
</div>
649662
);
650663
}

‎frontend/components/ui/tabs.tsx‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

0 commit comments

Comments
 (0)