feat: integrate document upload dialog and enhance dashboard layout

- Added DocumentUploadDialogProvider to manage document upload dialog state across components.
- Updated DashboardClientLayout to include the DocumentUploadDialogProvider for improved user experience.
- Refactored DocumentsTableShell to utilize the new dialog for file uploads instead of navigating to a separate upload page.
- Removed the deprecated upload page and streamlined document upload handling within the dialog.
- Enhanced DocumentUploadTab with improved file type handling and user feedback during uploads.
- Updated GridPattern styling for better visual consistency.
This commit is contained in:
Anish Sarkar 2026-01-02 04:07:13 +05:30
parent aa96e08231
commit 5ebb9d7aea
7 changed files with 316 additions and 273 deletions

View file

@ -20,6 +20,7 @@ import { AppSidebarProvider } from "@/components/sidebar/AppSidebarProvider";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { DocumentUploadDialogProvider } from "@/components/assistant-ui/document-upload-popup";
export function DashboardClientLayout({
children,
@ -240,32 +241,34 @@ export function DashboardClientLayout({
}
return (
<SidebarProvider className="h-full overflow-hidden" open={open} onOpenChange={setOpen}>
{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}
<AppSidebarProvider
searchSpaceId={searchSpaceId}
navSecondary={translatedNavSecondary}
navMain={translatedNavMain}
/>
<SidebarInset className="h-full ">
<main className="flex flex-col h-full">
<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
<div className="flex items-center justify-between w-full gap-2 px-4">
<div className="flex items-center gap-2">
<SidebarTrigger className="-ml-1" />
<div className="hidden md:flex items-center gap-2">
<Separator orientation="vertical" className="h-6" />
<DashboardBreadcrumb />
<DocumentUploadDialogProvider>
<SidebarProvider className="h-full overflow-hidden" open={open} onOpenChange={setOpen}>
{/* Use AppSidebarProvider which fetches user, search space, and recent chats */}
<AppSidebarProvider
searchSpaceId={searchSpaceId}
navSecondary={translatedNavSecondary}
navMain={translatedNavMain}
/>
<SidebarInset className="h-full ">
<main className="flex flex-col h-full">
<header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 border-b">
<div className="flex items-center justify-between w-full gap-2 px-4">
<div className="flex items-center gap-2">
<SidebarTrigger className="-ml-1" />
<div className="hidden md:flex items-center gap-2">
<Separator orientation="vertical" className="h-6" />
<DashboardBreadcrumb />
</div>
</div>
<div className="flex items-center gap-2">
<LanguageSwitcher />
</div>
</div>
<div className="flex items-center gap-2">
<LanguageSwitcher />
</div>
</div>
</header>
<div className="flex-1 overflow-hidden">{children}</div>
</main>
</SidebarInset>
</SidebarProvider>
</header>
<div className="flex-1 overflow-hidden">{children}</div>
</main>
</SidebarInset>
</SidebarProvider>
</DocumentUploadDialogProvider>
);
}

View file

@ -2,9 +2,10 @@
import { ChevronDown, ChevronUp, FileX, Plus } from "lucide-react";
import { motion } from "motion/react";
import { useParams, useRouter } from "next/navigation";
import { useParams } from "next/navigation";
import { useTranslations } from "next-intl";
import React from "react";
import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
import { DocumentViewer } from "@/components/document-viewer";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
@ -69,9 +70,9 @@ export function DocumentsTableShell({
onSortChange: (key: SortKey) => void;
}) {
const t = useTranslations("documents");
const router = useRouter();
const params = useParams();
const searchSpaceId = params.search_space_id;
const { openDialog } = useDocumentUploadDialog();
const sorted = React.useMemo(
() => sortDocuments(documents, sortKey, sortDesc),
@ -144,7 +145,7 @@ export function DocumentsTableShell({
</p>
</div>
<Button
onClick={() => router.push(`/dashboard/${searchSpaceId}/documents/upload`)}
onClick={openDialog}
className="mt-2"
>
<Plus className="mr-2 h-4 w-4" />

View file

@ -1,36 +0,0 @@
"use client";
import { Upload } from "lucide-react";
import { motion } from "motion/react";
import { useParams } from "next/navigation";
import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
export default function UploadDocumentsPage() {
const params = useParams();
const search_space_id = params.search_space_id as string;
return (
<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="space-y-6"
>
{/* Header */}
<div className="text-center space-y-2">
<h1 className="text-2xl sm:text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
<Upload className="h-6 w-6 sm:h-8 sm:w-8" />
Upload Documents
</h1>
<p className="text-muted-foreground text-sm sm:text-lg">
Upload documents to your search space for AI-powered search and chat
</p>
</div>
{/* Document Upload */}
<DocumentUploadTab searchSpaceId={search_space_id} />
</motion.div>
</div>
);
}