openrag/frontend/src/components/cloud-connectors-dropdown.tsx
2025-11-14 13:45:32 -06:00

89 lines
2 KiB
TypeScript

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { CloudConnectorsDialog } from "@/components/cloud-connectors-dialog";
import { Cloud, ChevronDown } from "lucide-react";
interface GoogleDriveFile {
id: string;
name: string;
mimeType: string;
webViewLink?: string;
iconLink?: string;
}
interface OneDriveFile {
id: string;
name: string;
mimeType?: string;
webUrl?: string;
driveItem?: {
file?: { mimeType: string };
folder?: unknown;
};
}
interface CloudConnectorsDropdownProps {
onFileSelected?: (
files: GoogleDriveFile[] | OneDriveFile[],
connectorType: string,
) => void;
buttonText?: string;
variant?:
| "default"
| "outline"
| "secondary"
| "ghost"
| "link"
| "destructive";
size?: "default" | "sm" | "lg" | "icon";
}
export function CloudConnectorsDropdown({
onFileSelected,
buttonText = "Cloud Files",
variant = "outline",
size = "default",
}: CloudConnectorsDropdownProps) {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const handleOpenDialog = () => {
setIsDialogOpen(true);
};
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant={variant} size={size}>
<Cloud className="mr-2 h-4 w-4" />
{buttonText}
<ChevronDown className="ml-2 h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuItem
onClick={handleOpenDialog}
className="cursor-pointer"
>
<Cloud className="mr-2 h-4 w-4" />
Select Cloud Files
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<CloudConnectorsDialog
isOpen={isDialogOpen}
onOpenChange={setIsDialogOpen}
onFileSelected={onFileSelected}
/>
</>
);
}