klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-10 13:26:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the migration script to delete orphaned fileobjects

Browse Source 
- Remove knowledge page from the sidebar
- Improve speed and rendering of the documents in the search page
This commit is contained in:
sabaimran
2025-01-10 21:06:48 -08:00
parent d77984f9d1
commit 57545c1485
4 changed files with 195 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/web/app/components/appSidebar/appSidebar.tsx
View File

@@ -26,7 +26,6 @@ import { useIsMobileWidth } from "@/app/common/utils";
import { UserPlusIcon } from "lucide-react"; import { UserPlusIcon } from "lucide-react";
import { useAuthenticatedData } from "@/app/common/auth"; import { useAuthenticatedData } from "@/app/common/auth";
import LoginPrompt from "../loginPrompt/loginPrompt"; import LoginPrompt from "../loginPrompt/loginPrompt";
import { url } from "inspector";
// Menu items. // Menu items.
const items = [ const items = [

212
src/interface/web/app/search/page.tsx
View File

@@ -17,7 +17,6 @@ import {
ArrowLeft, ArrowLeft,
ArrowRight, ArrowRight,
FileDashed, FileDashed,
FileMagnifyingGlass,
GithubLogo, GithubLogo,
Lightbulb, Lightbulb,
LinkSimple, LinkSimple,
@@ -26,31 +25,21 @@ import {
NotionLogo, NotionLogo,
Eye, Eye,
Trash, Trash,
ArrowsOutSimple,
DotsThreeVertical, DotsThreeVertical,
Waveform, Waveform,
Plus, Plus,
Download,
Brain,
Check,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import Link from "next/link"; import Link from "next/link";
import { getIconFromFilename } from "../common/iconUtils";
import { formatDateTime, useIsMobileWidth } from "../common/utils"; import { formatDateTime, useIsMobileWidth } from "../common/utils";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "../components/appSidebar/appSidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { KhojLogoType } from "../components/logo/khojLogo"; import { KhojLogoType } from "../components/logo/khojLogo";
import { InlineLoading } from "../components/loading/loading"; import { InlineLoading } from "../components/loading/loading";
import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogCancel,
AlertDialogAction,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -60,16 +49,13 @@ import {
DialogTrigger, DialogTrigger,
} from "@/components/ui/dialog"; } from "@/components/ui/dialog";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { Scroll } from "lucide-react";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { uploadDataForIndexing } from "../common/chatFunctions"; import { uploadDataForIndexing } from "../common/chatFunctions";
import { CommandDialog } from "@/components/ui/command";
import { Progress } from "@/components/ui/progress"; import { Progress } from "@/components/ui/progress";
interface AdditionalData { interface AdditionalData {
file: string; file: string;
@@ -102,25 +88,6 @@ function getNoteTypeIcon(source: string) {
return <NoteBlank className="text-muted-foreground" />; return <NoteBlank className="text-muted-foreground" />;
} }
const naturalLanguageSearchQueryExamples = [
"What does the paper say about climate change?",
"Making a cappuccino at home",
"Benefits of eating mangoes",
"How to plan a wedding on a budget",
"Appointment with Dr. Makinde on 12th August",
"Class notes lecture 3 on quantum mechanics",
"Painting concepts for acrylics",
"Abstract from the paper attention is all you need",
"Climbing Everest without oxygen",
"Solving a rubik's cube in 30 seconds",
"Facts about the planet Mars",
"How to make a website using React",
"Fish at the bottom of the ocean",
"Fish farming Kenya 2021",
"How to make a cake without an oven",
"Installing a solar panel at home",
];
interface NoteResultProps { interface NoteResultProps {
note: SearchResult; note: SearchResult;
setFocusSearchResult: (note: SearchResult) => void; setFocusSearchResult: (note: SearchResult) => void;
@@ -132,7 +99,6 @@ function Note(props: NoteResultProps) {
const fileName = isFileNameURL const fileName = isFileNameURL
? note.additional.heading ? note.additional.heading
: note.additional.file.split("/").pop(); : note.additional.file.split("/").pop();
const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
return ( return (
<Card className="bg-secondary h-full shadow-sm rounded-lg border border-muted mb-4 animate-fade-in-up"> <Card className="bg-secondary h-full shadow-sm rounded-lg border border-muted mb-4 animate-fade-in-up">
@@ -153,8 +119,8 @@ function Note(props: NoteResultProps) {
<ArrowRight className="inline ml-2" /> <ArrowRight className="inline ml-2" />
</Button> </Button>
</CardContent> </CardContent>
{isFileNameURL && (
<CardFooter> <CardFooter>
{isFileNameURL ? (
<a <a
href={note.additional.file} href={note.additional.file}
target="_blank" target="_blank"
@@ -163,13 +129,8 @@ function Note(props: NoteResultProps) {
<LinkSimple className="inline m-2" /> <LinkSimple className="inline m-2" />
{note.additional.file} {note.additional.file}
</a> </a>
) : (
<div className="bg-muted p-2 text-sm rounded-lg text-muted-foreground">
{fileIcon}
{note.additional.file}
</div>
)}
</CardFooter> </CardFooter>
)}
</Card> </Card>
); );
} }
@@ -179,15 +140,14 @@ function focusNote(note: SearchResult) {
const fileName = isFileNameURL const fileName = isFileNameURL
? note.additional.heading ? note.additional.heading
: note.additional.file.split("/").pop(); : note.additional.file.split("/").pop();
const fileIcon = getIconFromFilename(fileName || ".txt", "h-4 w-4 inline mr-2");
return ( return (
<Card className="bg-secondary h-full shadow-sm rounded-lg border border-muted mb-4"> <Card className="bg-secondary h-full shadow-sm rounded-lg border border-muted mb-4 animate-fade-in-up">
<CardHeader> <CardHeader>
<CardTitle>{fileName}</CardTitle> <CardTitle>{fileName}</CardTitle>
</CardHeader> </CardHeader>
{isFileNameURL && (
<CardFooter> <CardFooter>
{isFileNameURL ? (
<a <a
href={note.additional.file} href={note.additional.file}
target="_blank" target="_blank"
@@ -196,13 +156,8 @@ function focusNote(note: SearchResult) {
<LinkSimple className="inline" /> <LinkSimple className="inline" />
{note.additional.file} {note.additional.file}
</a> </a>
) : (
<div className="bg-muted p-3 text-sm rounded-lg text-muted-foreground flex items-center gap-2">
{fileIcon}
{note.additional.file}
</div>
)}
</CardFooter> </CardFooter>
)}
<CardContent> <CardContent>
<div className="text-m">{note.entry}</div> <div className="text-m">{note.entry}</div>
</CardContent> </CardContent>
@@ -211,9 +166,8 @@ function focusNote(note: SearchResult) {
} }
const UploadFiles: React.FC<{ const UploadFiles: React.FC<{
onClose: () => void;
setUploadedFiles: (files: string[]) => void; setUploadedFiles: (files: string[]) => void;
}> = ({ onClose, setUploadedFiles }) => { }> = ({ setUploadedFiles }) => {
const [isDragAndDropping, setIsDragAndDropping] = useState(false); const [isDragAndDropping, setIsDragAndDropping] = useState(false);
const [warning, setWarning] = useState<string | null>(null); const [warning, setWarning] = useState<string | null>(null);
@@ -225,6 +179,11 @@ const UploadFiles: React.FC<{
useEffect(() => { useEffect(() => {
if (!uploading) { if (!uploading) {
setProgressValue(0); setProgressValue(0);
if (!warning && !error) {
// Force close the dialog by simulating a click on the escape key
const event = new KeyboardEvent("keydown", { key: "Escape" });
document.dispatchEvent(event);
}
} }
if (uploading) { if (uploading) {
@@ -278,16 +237,16 @@ const UploadFiles: React.FC<{
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant={"secondary"} className="mt-4"> <Button variant={"secondary"} className="mt-4">
<Brain className="h-4 w-4 mr-2" />
Add Documents Add Documents
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Build Knowledge Base</DialogTitle> <DialogTitle>Build Your Knowledge Base</DialogTitle>
<DialogDescription> <DialogDescription>
Adding files to your Khoj knowledge base allows your AI to search through Add your files to supercharge Khoj's AI with your knowledge. Get instant,
your own documents. This helps you get personalized answers, grounded in personalized answers powered by your own documents and data.
your own data.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div <div
@@ -344,7 +303,7 @@ const UploadFiles: React.FC<{
</div> </div>
)} )}
<div <div
className={`flex-none p-4 bg-secondary border-b ${isDragAndDropping ? "animate-pulse" : ""} rounded-lg`} className={`flex-none p-4 border-b ${isDragAndDropping ? "animate-pulse border-blue-500 bg-blue-500 bg-opacity-25" : "bg-secondary"} rounded-lg`}
> >
<div className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg"> <div className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg">
{isDragAndDropping ? ( {isDragAndDropping ? (
@@ -379,8 +338,6 @@ export default function Search() {
const [selectedFileFullText, setSelectedFileFullText] = useState<string | null>(null); const [selectedFileFullText, setSelectedFileFullText] = useState<string | null>(null);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [uploadedFiles, setUploadedFiles] = useState<string[]>([]); const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
const [filteredFiles, setFilteredFiles] = useState<string[]>([]);
const { toast } = useToast(); const { toast } = useToast();
@@ -408,36 +365,6 @@ export default function Search() {
}); });
} }
const deleteSelected = async () => {
let filesToDelete = selectedFiles.length > 0 ? selectedFiles : filteredFiles;
if (filesToDelete.length === 0) {
return;
}
try {
const response = await fetch("/api/content/files", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ files: filesToDelete }),
});
if (!response.ok) throw new Error("Failed to delete files");
// Update the syncedFiles state
setUploadedFiles((prevFiles) =>
prevFiles.filter((file) => !filesToDelete.includes(file)),
);
// Reset selectedFiles
setSelectedFiles([]);
} catch (error) {
console.error("Error deleting files:", error);
}
};
const fetchFiles = async () => { const fetchFiles = async () => {
try { try {
const response = await fetch("/api/content/all"); const response = await fetch("/api/content/all");
@@ -468,6 +395,18 @@ export default function Search() {
} }
}; };
const handleDownload = (fileName: string, content: string) => {
const blob = new Blob([content], { type: "text/plain" });
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${fileName.split("/").pop()}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
};
useEffect(() => { useEffect(() => {
if (!searchQuery.trim()) { if (!searchQuery.trim()) {
setSearchResults(null); setSearchResults(null);
@@ -547,19 +486,20 @@ export default function Search() {
<KhojLogoType className="h-auto w-16" /> <KhojLogoType className="h-auto w-16" />
</a> </a>
) : ( ) : (
<h2 className="text-lg">Search</h2> <h2 className="text-lg">Search Your Knowledge Base</h2>
)} )}
</header> </header>
<div> <div>
<div className={`${styles.searchLayout}`}> <div className={`${styles.searchLayout}`}>
<div className="md:w-3/4 sm:w-full mx-auto pt-6 md:pt-8"> <div className="md:w-5/6 sm:w-full mx-auto pt-6 md:pt-8">
<div className="p-4 md:w-3/4 sm:w-full mx-auto"> <div className="p-4 w-full mx-auto">
<div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg"> <div className="flex justify-between items-center border-2 border-muted p-1 gap-1 rounded-lg">
<Input <Input
autoFocus={true} autoFocus={true}
className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent" className="border-none pl-4 focus-visible:ring-transparent focus-visible:ring-offset-transparent"
onChange={(e) => setSearchQuery(e.currentTarget.value)} onChange={(e) => setSearchQuery(e.currentTarget.value)}
onKeyDown={(e) => e.key === "Enter" && search()} onKeyDown={(e) => e.key === "Enter" && search()}
value={searchQuery}
type="search" type="search"
placeholder="Search Documents" placeholder="Search Documents"
/> />
@@ -572,10 +512,9 @@ export default function Search() {
<span>Find</span> <span>Find</span>
</Button> </Button>
</div> </div>
<UploadFiles {searchResults === null && (
onClose={() => {}} <UploadFiles setUploadedFiles={setUploadedFiles} />
setUploadedFiles={setUploadedFiles} )}
/>
{searchResultsLoading && ( {searchResultsLoading && (
<div className="mt-4 flex items-center justify-center"> <div className="mt-4 flex items-center justify-center">
<InlineLoading <InlineLoading
@@ -603,6 +542,14 @@ export default function Search() {
searchResults && searchResults &&
searchResults.length > 0 && ( searchResults.length > 0 && (
<div className="mt-4 max-w-[92vw] break-all"> <div className="mt-4 max-w-[92vw] break-all">
<Button
onClick={() => setSearchQuery("")}
className="mb-4"
variant={"outline"}
>
<ArrowLeft className="inline mr-2" />
See All
</Button>
<ScrollArea className="h-[80vh]"> <ScrollArea className="h-[80vh]">
{searchResults.map((result, index) => { {searchResults.map((result, index) => {
return ( return (
@@ -618,7 +565,9 @@ export default function Search() {
</ScrollArea> </ScrollArea>
</div> </div>
)} )}
{searchResults === null && ( {!searchResultsLoading &&
searchResults === null &&
!searchQuery.trim() && (
<div className="w-full mt-4"> <div className="w-full mt-4">
{fileObjectsLoading && ( {fileObjectsLoading && (
<div className="mt-4 flex items-center justify-center"> <div className="mt-4 flex items-center justify-center">
@@ -663,9 +612,25 @@ export default function Search() {
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
<div className="flex items-center gap-2">
{file.file_name {file.file_name
.split("/") .split("/")
.pop()} .pop()}
<Button
variant={
"ghost"
}
title="Download as plaintext"
onClick={() =>
handleDownload(
file.file_name,
file.raw_text,
)
}
>
<Download className="h-4 w-4" />
</Button>
</div>
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="h-[50vh]"> <ScrollArea className="h-[50vh]">
@@ -679,7 +644,9 @@ export default function Search() {
iconClassName="h-5 w-5" iconClassName="h-5 w-5"
/> />
)} )}
{selectedFileFullText} {
selectedFileFullText
}
</p> </p>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
@@ -692,49 +659,22 @@ export default function Search() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="flex flex-col gap-0 w-fit"> <DropdownMenuContent className="flex flex-col gap-0 w-fit">
<DropdownMenuItem className="p-0"> <DropdownMenuItem className="p-0">
<AlertDialog>
<AlertDialogTrigger>
<Button <Button
variant={ variant={"ghost"}
"ghost"
}
className="flex items-center gap-2 p-1 text-sm" className="flex items-center gap-2 p-1 text-sm"
onClick={() => {
handleDelete(
file.file_name,
);
}}
> >
<Trash className="h-4 w-4" /> <Trash className="h-4 w-4" />
<span className="text-xs"> <span className="text-xs">
Delete
</span>
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
Delete File
</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>
Are you sure you
want to delete
this file?
</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={() =>
handleDelete(
file.file_name,
)
}
>
{isDeleting {isDeleting
? "Deleting..." ? "Deleting..."
: "Delete"} : "Delete"}
</AlertDialogAction> </span>
</AlertDialogFooter> </Button>
</AlertDialogContent>
</AlertDialog>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

337
src/interface/web/app/settings/page.tsx
View File

@@ -3,7 +3,7 @@
import styles from "./settings.module.css"; import styles from "./settings.module.css";
import "intl-tel-input/styles"; import "intl-tel-input/styles";
import { Suspense, useEffect, useRef, useState } from "react"; import { Suspense, useEffect, useState } from "react";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { useUserConfig, ModelOptions, UserConfig, SubscriptionStates } from "../common/auth"; import { useUserConfig, ModelOptions, UserConfig, SubscriptionStates } from "../common/auth";
@@ -23,14 +23,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"; import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
import {
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandDialog,
} from "@/components/ui/command";
import { import {
ArrowRight, ArrowRight,
@@ -56,320 +48,20 @@ import {
ArrowCircleUp, ArrowCircleUp,
ArrowCircleDown, ArrowCircleDown,
ArrowsClockwise, ArrowsClockwise,
Check,
CaretDown, CaretDown,
Waveform, Waveform,
MagnifyingGlass,
Brain,
} from "@phosphor-icons/react"; } from "@phosphor-icons/react";
import Loading from "../components/loading/loading"; import Loading from "../components/loading/loading";
import IntlTelInput from "intl-tel-input/react"; import IntlTelInput from "intl-tel-input/react";
import { uploadDataForIndexing } from "../common/chatFunctions";
import {
AlertDialog,
AlertDialogAction,
AlertDialogContent,
AlertDialogDescription,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Progress } from "@/components/ui/progress";
import Link from "next/link";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "../components/appSidebar/appSidebar"; import { AppSidebar } from "../components/appSidebar/appSidebar";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { KhojLogoType } from "../components/logo/khojLogo"; import { KhojLogoType } from "../components/logo/khojLogo";
const ManageFilesModal: React.FC<{ onClose: () => void }> = ({ onClose }) => {
const [syncedFiles, setSyncedFiles] = useState<string[]>([]);
const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
const [searchQuery, setSearchQuery] = useState("");
const [isDragAndDropping, setIsDragAndDropping] = useState(false);
const [warning, setWarning] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [uploading, setUploading] = useState(false);
const [progressValue, setProgressValue] = useState(0);
const [uploadedFiles, setUploadedFiles] = useState<string[]>([]);
const fileInputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (!uploading) {
setProgressValue(0);
}
if (uploading) {
const interval = setInterval(() => {
setProgressValue((prev) => {
const increment = Math.floor(Math.random() * 5) + 1; // Generates a random number between 1 and 5
const nextValue = prev + increment;
return nextValue < 100 ? nextValue : 100; // Ensures progress does not exceed 100
});
}, 800);
return () => clearInterval(interval);
}
}, [uploading]);
useEffect(() => {
const fetchFiles = async () => {
try {
const response = await fetch("/api/content/computer");
if (!response.ok) throw new Error("Failed to fetch files");
// Extract resonse
const syncedFiles = await response.json();
// Validate response
if (Array.isArray(syncedFiles)) {
// Set synced files state
setSyncedFiles(syncedFiles.toSorted());
} else {
console.error("Unexpected data format from API");
}
} catch (error) {
console.error("Error fetching files:", error);
}
};
fetchFiles();
}, [uploadedFiles]);
const filteredFiles = syncedFiles.filter((file) =>
file.toLowerCase().includes(searchQuery.toLowerCase()),
);
const deleteSelected = async () => {
let filesToDelete = selectedFiles.length > 0 ? selectedFiles : filteredFiles;
if (filesToDelete.length === 0) {
return;
}
try {
const response = await fetch("/api/content/files", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ files: filesToDelete }),
});
if (!response.ok) throw new Error("Failed to delete files");
// Update the syncedFiles state
setSyncedFiles((prevFiles) =>
prevFiles.filter((file) => !filesToDelete.includes(file)),
);
// Reset selectedFiles
setSelectedFiles([]);
} catch (error) {
console.error("Error deleting files:", error);
}
};
const deleteFile = async (filename: string) => {
try {
const response = await fetch(
`/api/content/file?filename=${encodeURIComponent(filename)}`,
{
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
},
);
if (!response.ok) throw new Error("Failed to delete file");
// Update the syncedFiles state
setSyncedFiles((prevFiles) => prevFiles.filter((file) => file !== filename));
// Remove the file from selectedFiles if it's there
setSelectedFiles((prevSelected) => prevSelected.filter((file) => file !== filename));
} catch (error) {
console.error("Error deleting file:", error);
}
};
function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(true);
}
function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(false);
}
function handleDragAndDropFiles(event: React.DragEvent<HTMLDivElement>) {
event.preventDefault();
setIsDragAndDropping(false);
if (!event.dataTransfer.files) return;
uploadFiles(event.dataTransfer.files);
}
function openFileInput() {
if (fileInputRef && fileInputRef.current) {
fileInputRef.current.click();
}
}
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
if (!event.target.files) return;
uploadFiles(event.target.files);
}
function uploadFiles(files: FileList) {
uploadDataForIndexing(files, setWarning, setUploading, setError, setUploadedFiles);
}
return (
<CommandDialog open={true} onOpenChange={onClose}>
<AlertDialog open={warning !== null || error != null}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Alert</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogDescription>{warning || error}</AlertDialogDescription>
<AlertDialogAction
className="bg-slate-400 hover:bg-slate-500"
onClick={() => {
setWarning(null);
setError(null);
setUploading(false);
}}
>
Close
</AlertDialogAction>
</AlertDialogContent>
</AlertDialog>
<div
className={`flex flex-col h-full`}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDragAndDropFiles}
onClick={openFileInput}
>
<input
type="file"
multiple
ref={fileInputRef}
style={{ display: "none" }}
onChange={handleFileChange}
/>
<div className="flex-none p-4">
Upload files
{uploading && (
<Progress
indicatorColor="bg-slate-500"
className="w-full h-2 rounded-full"
value={progressValue}
/>
)}
</div>
<div
className={`flex-none p-4 bg-secondary border-b ${isDragAndDropping ? "animate-pulse" : ""} rounded-lg`}
>
<div className="flex items-center justify-center w-full h-32 border-2 border-dashed border-gray-300 rounded-lg">
{isDragAndDropping ? (
<div className="flex items-center justify-center w-full h-full">
<Waveform className="h-6 w-6 mr-2" />
<span>Drop files to upload</span>
</div>
) : (
<div className="flex items-center justify-center w-full h-full">
<Plus className="h-6 w-6 mr-2" />
<span>Drag and drop files here</span>
</div>
)}
</div>
</div>
</div>
<div className="flex flex-col h-full">
<div className="flex-none p-4 bg-background border-b">
<CommandInput
placeholder="Find synced files"
value={searchQuery}
onValueChange={setSearchQuery}
/>
</div>
<div className="flex-grow overflow-auto">
<CommandList>
<CommandEmpty>
{syncedFiles.length === 0 ? (
<div className="flex items-center justify-center">
<ExclamationMark className="h-4 w-4 mr-2" weight="bold" />
No files synced
</div>
) : (
<div>
Could not find a good match.
<Link href="/search" className="block">
Need advanced search? Click here.
</Link>
</div>
)}
</CommandEmpty>
<CommandGroup heading="Synced files">
{filteredFiles.map((filename: string) => (
<CommandItem
key={filename}
value={filename}
onSelect={(value) => {
setSelectedFiles((prev) =>
prev.includes(value)
? prev.filter((f) => f !== value)
: [...prev, value],
);
}}
>
<div className="flex items-center justify-between w-full">
<div
className={`flex items-center ${selectedFiles.includes(filename) ? "font-semibold" : ""}`}
>
{selectedFiles.includes(filename) && (
<Check className="h-4 w-4 mr-2" />
)}
<span className="break-all">{filename}</span>
</div>
<Button
variant="outline"
size="sm"
onClick={() => deleteFile(filename)}
className="ml-auto"
>
<Trash className="h-4 w-4" />
</Button>
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</div>
<div className="flex-none p-4 bg-background border-t">
<div className="flex justify-between">
<Button
variant="outline"
size="sm"
onClick={deleteSelected}
className="mr-2"
>
<Trash className="h-4 w-4 mr-2" />
{selectedFiles.length > 0
? `Delete Selected (${selectedFiles.length})`
: "Delete All"}
</Button>
</div>
</div>
</div>
</CommandDialog>
);
};
interface DropdownComponentProps { interface DropdownComponentProps {
items: ModelOptions[]; items: ModelOptions[];
selected: number; selected: number;
@@ -508,7 +200,6 @@ export default function SettingsView() {
const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>( const [numberValidationState, setNumberValidationState] = useState<PhoneNumberValidationState>(
PhoneNumberValidationState.Verified, PhoneNumberValidationState.Verified,
); );
const [isManageFilesModalOpen, setIsManageFilesModalOpen] = useState(false);
const { toast } = useToast(); const { toast } = useToast();
const isMobileWidth = useIsMobileWidth(); const isMobileWidth = useIsMobileWidth();
@@ -1066,18 +757,13 @@ export default function SettingsView() {
</Card> </Card>
</div> </div>
</div> </div>
{isManageFilesModalOpen && (
<ManageFilesModal
onClose={() => setIsManageFilesModalOpen(false)}
/>
)}
<div className="section grid gap-8"> <div className="section grid gap-8">
<div className="text-2xl">Content</div> <div className="text-2xl">Content</div>
<div className="cards flex flex-wrap gap-16"> <div className="cards flex flex-wrap gap-16">
<Card id="computer" className={cardClassName}> <Card id="computer" className={cardClassName}>
<CardHeader className="flex flex-row text-2xl"> <CardHeader className="flex flex-row text-2xl">
<Laptop className="h-8 w-8 mr-2" /> <Brain className="h-8 w-8 mr-2" />
Files Knowledge Base
{userConfig.enabled_content_source.computer && ( {userConfig.enabled_content_source.computer && (
<CheckCircle <CheckCircle
className="h-6 w-6 ml-auto text-green-500" className="h-6 w-6 ml-auto text-green-500"
@@ -1086,20 +772,19 @@ export default function SettingsView() {
)} )}
</CardHeader> </CardHeader>
<CardContent className="overflow-hidden pb-12 text-gray-400"> <CardContent className="overflow-hidden pb-12 text-gray-400">
Manage your synced files Manage and search through your digital brain.
</CardContent> </CardContent>
<CardFooter className="flex flex-wrap gap-4"> <CardFooter className="flex flex-wrap gap-4">
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
title="Search thorugh files"
onClick={() => onClick={() =>
setIsManageFilesModalOpen(true) (window.location.href = "/search")
} }
> >
<> <MagnifyingGlass className="h-5 w-5 inline mr-1" />
<Files className="h-5 w-5 inline mr-1" /> Search
Manage
</>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
@@ -1110,7 +795,7 @@ export default function SettingsView() {
} }
> >
<CloudSlash className="h-5 w-5 inline mr-1" /> <CloudSlash className="h-5 w-5 inline mr-1" />
Disable Clear All
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>

17
src/khoj/database/management/commands/delete_orphaned_fileobjects.py
View File

@@ -32,18 +32,25 @@ class Command(BaseCommand):
batch_size = 1000 batch_size = 1000
processed = 0 processed = 0
while True: while processed < total_orphaned:
batch = orphaned_files[:batch_size] # Get batch of IDs to process
if not batch: batch_ids = list(orphaned_files.values_list("id", flat=True)[:batch_size])
if not batch_ids:
break break
if options["apply"]: if options["apply"]:
count = batch.delete()[0] # Delete by ID to avoid slice/limit issues
count = FileObject.objects.filter(id__in=batch_ids).delete()[0]
processed += count processed += count
self.stdout.write(f"Deleted {processed}/{total_orphaned} orphaned FileObjects") self.stdout.write(f"Deleted {processed}/{total_orphaned} orphaned FileObjects")
else: else:
processed += len(batch) processed += len(batch_ids)
self.stdout.write(f"Would delete {processed}/{total_orphaned} orphaned FileObjects") self.stdout.write(f"Would delete {processed}/{total_orphaned} orphaned FileObjects")
# Re-query to get fresh state
orphaned_files = FileObject.objects.annotate(
has_entries=Exists(Entry.objects.filter(file_object=OuterRef("pk")))
).filter(has_entries=False)
action = "Deleted" if options["apply"] else "Would delete" action = "Deleted" if options["apply"] else "Would delete"
self.stdout.write(self.style.SUCCESS(f"{action} {processed} orphaned FileObjects")) self.stdout.write(self.style.SUCCESS(f"{action} {processed} orphaned FileObjects"))