27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { ThemeProvider } from "next-themes"; 4 | import App from "./App.tsx"; 5 | import "./index.css"; 6 | import { SettingsProvider } from "./contexts/SettingsContext"; 7 | import { ConvexProviderWrapper } from "./components/ConvexProviderWrapper"; 8 | 9 | ReactDOM.createRoot(document.getElementById("root")!).render( 10 | 11 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | , 24 | ); 25 | -------------------------------------------------------------------------------- /src/utils/formatters.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Formats a file size in bytes to a human readable string 3 | * Automatically chooses the most appropriate unit (B, KB, MB, GB, TB) 4 | */ 5 | export function formatFileSize(bytes: number): string { 6 | const units = ["B", "KB", "MB", "GB", "TB"]; 7 | let size = bytes; 8 | let unitIndex = 0; 9 | 10 | while (size >= 1024 && unitIndex < units.length - 1) { 11 | size /= 1024; 12 | unitIndex++; 13 | } 14 | 15 | // For bytes, show no decimal places 16 | if (unitIndex === 0) return `${Math.round(size)} ${units[unitIndex]}`; 17 | 18 | // For KB and above, show 1 decimal place if the number is small 19 | // For larger numbers (>=100), show no decimal places 20 | const decimals = size >= 100 ? 0 : 1; 21 | return `${size.toFixed(decimals)} ${units[unitIndex]}`; 22 | } 23 | -------------------------------------------------------------------------------- /src/hooks/useKeyboardShortcuts.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Id } from "../../convex/_generated/dataModel"; 3 | 4 | export const useKeyboardShortcuts = ({ 5 | selectedIds, 6 | onDelete, 7 | onClearSelection, 8 | }: { 9 | selectedIds: Set>; 10 | onDelete: () => void; 11 | onClearSelection: () => void; 12 | }) => { 13 | const handleKeyDown = React.useCallback( 14 | (e: KeyboardEvent) => { 15 | if (e.key === "Delete" && selectedIds.size > 0) onDelete(); 16 | if (e.key === "Escape") onClearSelection(); 17 | }, 18 | [selectedIds, onDelete, onClearSelection], 19 | ); 20 | 21 | React.useEffect(() => { 22 | window.addEventListener("keydown", handleKeyDown); 23 | return () => window.removeEventListener("keydown", handleKeyDown); 24 | }, [handleKeyDown]); 25 | }; 26 | -------------------------------------------------------------------------------- /src/components/AppTitle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const AppTitle: React.FC = () => { 4 | return ( 5 |

6 |

7 |

12 |

13 |

14 | OurFiles 15 |

16 |

17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /src/hooks/useIsMobile.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const MOBILE_USER_AGENT = 4 | /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i; 5 | 6 | export default function useIsMobile() { 7 | const getIsMobile = () => 8 | typeof window !== "undefined" && 9 | (window.innerWidth <= 768 || MOBILE_USER_AGENT.test(navigator.userAgent)); 10 | 11 | const [isMobile, setIsMobile] = useState(getIsMobile()); 12 | 13 | useEffect(() => { 14 | const update = () => setIsMobile(getIsMobile()); 15 | window.addEventListener("resize", update); 16 | window.addEventListener("orientationchange", update); 17 | return () => { 18 | window.removeEventListener("resize", update); 19 | window.removeEventListener("orientationchange", update); 20 | }; 21 | }, []); 22 | 23 | return isMobile; 24 | } 25 | -------------------------------------------------------------------------------- /src/components/EmptyState.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const EmptyState: React.FC = () => { 4 | return ( 5 |

9 | 22 |

Drag and drop files here

23 |

24 | ); 25 | }; 26 | -------------------------------------------------------------------------------- /convex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | /* This TypeScript project config describes the environment that 3 | * Convex functions run in and is used to typecheck them. 4 | * You can modify it, but some settings required to use Convex. 5 | */ 6 | "compilerOptions": { 7 | /* These settings are not required by Convex and can be modified. */ 8 | "allowJs": true, 9 | "strict": true, 10 | "moduleResolution": "Bundler", 11 | "jsx": "react-jsx", 12 | "skipLibCheck": true, 13 | "allowSyntheticDefaultImports": true, 14 | 15 | /* These compiler options are required by Convex */ 16 | "target": "ESNext", 17 | "lib": ["ES2021", "dom"], 18 | "forceConsistentCasingInFileNames": true, 19 | "module": "ESNext", 20 | "isolatedModules": true, 21 | "noEmit": true 22 | }, 23 | "include": ["./**/*"], 24 | "exclude": ["./_generated"] 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 5 | "target": "ES2020", 6 | "useDefineForClassFields": true, 7 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 8 | "module": "ESNext", 9 | "skipLibCheck": true, 10 | 11 | /* Bundler mode */ 12 | "moduleResolution": "bundler", 13 | "allowImportingTsExtensions": true, 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "moduleDetection": "force", 17 | "noEmit": true, 18 | "jsx": "react-jsx", 19 | 20 | /* Linting */ 21 | "strict": true, 22 | "noUnusedLocals": false, 23 | "noUnusedParameters": false, 24 | "noFallthroughCasesInSwitch": true, 25 | 26 | /* Import paths */ 27 | "paths": { 28 | "@/*": ["./src/*"] 29 | } 30 | }, 31 | "include": ["src"] 32 | } 33 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ); 21 | }, 22 | ); 23 | Input.displayName = "Input"; 24 | 25 | export { Input }; 26 | -------------------------------------------------------------------------------- /convex/schema.ts: -------------------------------------------------------------------------------- 1 | import { defineSchema, defineTable } from "convex/server"; 2 | import { v } from "convex/values"; 3 | 4 | export default defineSchema({ 5 | files: defineTable({ 6 | name: v.string(), 7 | size: v.number(), 8 | type: v.string(), 9 | position: v.object({ 10 | x: v.number(), 11 | y: v.number(), 12 | }), 13 | uploadState: v.union( 14 | v.object({ 15 | kind: v.literal("created"), 16 | }), 17 | v.object({ 18 | kind: v.literal("uploading"), 19 | progress: v.number(), 20 | lastProgressAt: v.number(), 21 | timeoutJobId: v.id("_scheduled_functions"), 22 | }), 23 | v.object({ 24 | kind: v.literal("uploaded"), 25 | storageId: v.id("_storage"), 26 | url: v.string(), 27 | }), 28 | v.object({ 29 | kind: v.literal("errored"), 30 | message: v.string(), 31 | }), 32 | ), 33 | }), 34 | }); 35 | -------------------------------------------------------------------------------- /src/components/UnselectedItem.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { FileIcon } from "./FileIcon"; 3 | import { Doc } from "../../convex/_generated/dataModel"; 4 | import { useFileDownloadDrag } from "../hooks/useFileDownloadDrag"; 5 | 6 | type UnselectedItemProps = { 7 | file: Doc<"files">; 8 | onClick: (e: React.MouseEvent) => void; 9 | isDragSelecting?: boolean; 10 | }; 11 | 12 | export const UnselectedItem: React.FC = ({ 13 | file, 14 | onClick, 15 | isDragSelecting, 16 | }) => { 17 | const { handleDragStart, handleDragEnd, canDownload } = useFileDownloadDrag({ 18 | files: [file], 19 | singleFile: true, 20 | }); 21 | 22 | return ( 23 | 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /convex/crons.ts: -------------------------------------------------------------------------------- 1 | import { cronJobs } from "convex/server"; 2 | import { internal, api } from "./_generated/api"; 3 | import { internalMutation } from "./_generated/server"; 4 | import { v } from "convex/values"; 5 | import { Doc } from "./_generated/dataModel"; 6 | import { FILE_CLEAR_INTERVAL_MINS } from "./constants"; 7 | 8 | export const wipeFiles = internalMutation({ 9 | args: {}, 10 | returns: v.null(), 11 | handler: async (ctx) => { 12 | const files = await ctx.db.query("files").collect(); 13 | const fileIds = files.map((file: Doc<"files">) => file._id); 14 | if (fileIds.length > 0) 15 | await ctx.runMutation(api.files.remove, { ids: fileIds }); 16 | return null; 17 | }, 18 | }); 19 | 20 | const crons = cronJobs(); 21 | 22 | // Only register the cron if interval is positive 23 | if (FILE_CLEAR_INTERVAL_MINS > 0) 24 | crons.interval( 25 | "wipe-files", 26 | { minutes: FILE_CLEAR_INTERVAL_MINS }, 27 | internal.crons.wipeFiles, 28 | {}, 29 | ); 30 | 31 | export default crons; 32 | -------------------------------------------------------------------------------- /convex/_generated/api.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated `api` utility. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import type { 12 | ApiFromModules, 13 | FilterApi, 14 | FunctionReference, 15 | } from "convex/server"; 16 | import type * as constants from "../constants.js"; 17 | import type * as crons from "../crons.js"; 18 | import type * as files from "../files.js"; 19 | 20 | /** 21 | * A utility for referencing Convex functions in your app's API. 22 | * 23 | * Usage: 24 | * ```js 25 | * const myFunctionReference = api.myModule.myFunction; 26 | * ``` 27 | */ 28 | declare const fullApi: ApiFromModules<{ 29 | constants: typeof constants; 30 | crons: typeof crons; 31 | files: typeof files; 32 | }>; 33 | export declare const api: FilterApi< 34 | typeof fullApi, 35 | FunctionReference 36 | >; 37 | export declare const internal: FilterApi< 38 | typeof fullApi, 39 | FunctionReference 40 | >; 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Mike Cann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /convex/constants.ts: -------------------------------------------------------------------------------- 1 | import { query } from "./_generated/server"; 2 | 3 | // Helper to safely get environment variables with proper typing 4 | const getEnvVar = ({ 5 | name, 6 | parse, 7 | defaultValue, 8 | }: { 9 | name: string; 10 | parse: (value: string) => T; 11 | defaultValue: T; 12 | }): T => 13 | typeof process === "undefined" || !process.env[name] 14 | ? defaultValue 15 | : parse(process.env[name]); 16 | 17 | // File size limits 18 | const DEFAULT_MAX_FILE_SIZE = 5000 * 1024 * 1024; 19 | 20 | export const MAX_FILE_SIZE = getEnvVar({ 21 | name: "MAX_FILE_SIZE", 22 | parse: parseInt, 23 | defaultValue: DEFAULT_MAX_FILE_SIZE, 24 | }); 25 | 26 | // Timeouts 27 | export const UPLOAD_TIMEOUT_MS = getEnvVar({ 28 | name: "UPLOAD_TIMEOUT_MS", 29 | parse: parseInt, 30 | defaultValue: 10000, // 10 seconds 31 | }); 32 | 33 | // File clearing interval in minutes, -1 to disable 34 | export const FILE_CLEAR_INTERVAL_MINS = getEnvVar({ 35 | name: "FILE_CLEAR_INTERVAL_MINS", 36 | parse: parseInt, 37 | defaultValue: -1, 38 | }); 39 | 40 | export const getConfig = query({ 41 | args: {}, 42 | handler: async () => { 43 | return { 44 | maxFileSize: MAX_FILE_SIZE, 45 | uploadTimeoutMs: UPLOAD_TIMEOUT_MS, 46 | }; 47 | }, 48 | }); 49 | -------------------------------------------------------------------------------- /src/components/FileGhostPreview.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Doc, Id } from "../../convex/_generated/dataModel"; 3 | import { FileIcon } from "./FileIcon"; 4 | 5 | type Position = { x: number; y: number }; 6 | type RelativePosition = { id: Id<"files">; offsetX: number; offsetY: number }; 7 | 8 | export const FileGhostPreview: React.FC<{ 9 | file: Doc<"files">; 10 | dragPosition: Position; 11 | relativePositions: RelativePosition[]; 12 | allSelectedFiles: Doc<"files">[]; 13 | }> = ({ file, dragPosition, relativePositions, allSelectedFiles }) => ( 14 | <> 15 | 24 | {relativePositions.map(({ id, offsetX, offsetY }) => { 25 | const relativeFile = allSelectedFiles.find((f) => f._id === id); 26 | if (!relativeFile) return null; 27 | return ( 28 | 41 | ); 42 | })} 43 | 44 | ); 45 | -------------------------------------------------------------------------------- /src/components/MultiFileDownloadDialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | Dialog, 4 | DialogContent, 5 | DialogDescription, 6 | DialogFooter, 7 | DialogHeader, 8 | DialogTitle, 9 | } from "./ui/dialog"; 10 | import { Button } from "./ui/button"; 11 | 12 | type MultiFileDownloadDialogProps = { 13 | open: boolean; 14 | onOpenChange: (open: boolean) => void; 15 | onConfirm: () => void; 16 | fileCount: number; 17 | }; 18 | 19 | export const MultiFileDownloadDialog: React.FC< 20 | MultiFileDownloadDialogProps 21 | > = ({ open, onOpenChange, onConfirm, fileCount }) => ( 22 | 45 | ); 46 | -------------------------------------------------------------------------------- /src/components/ui/toggle.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const toggleVariants = cva( 8 | "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-transparent", 13 | outline: 14 | "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", 15 | }, 16 | size: { 17 | default: "h-9 px-3", 18 | sm: "h-8 px-2", 19 | lg: "h-10 px-3", 20 | }, 21 | }, 22 | defaultVariants: { 23 | variant: "default", 24 | size: "default", 25 | }, 26 | }, 27 | ); 28 | 29 | const Toggle = React.forwardRef< 30 | React.ElementRef, 31 | React.ComponentPropsWithoutRef & 32 | VariantProps 33 | >(({ className, variant, size, ...props }, ref) => ( 34 | 39 | )); 40 | 41 | Toggle.displayName = TogglePrimitive.Root.displayName; 42 | 43 | export { Toggle, toggleVariants }; 44 | -------------------------------------------------------------------------------- /src/hooks/useFileCreator.ts: -------------------------------------------------------------------------------- 1 | import { useOptimisticCreateFile } from "./useOptimisticFiles"; 2 | import { useFileUploader } from "./useFileUploader"; 3 | import { toast } from "sonner"; 4 | import { useQuery } from "convex/react"; 5 | import { api } from "../../convex/_generated/api"; 6 | 7 | export function useFileCreator() { 8 | const createFile = useOptimisticCreateFile(); 9 | const { uploadFile } = useFileUploader(); 10 | const config = useQuery(api.constants.getConfig); 11 | 12 | const createAndUploadFiles = async ( 13 | files: File[], 14 | getPosition: (index: number) => { x: number; y: number }, 15 | ) => { 16 | if (!config) return []; 17 | 18 | // Filter out files that are too large 19 | const validFiles = []; 20 | for (const file of files) { 21 | if (file.size > config.maxFileSize) { 22 | toast.error( 23 | `File ${file.name} exceeds maximum size of ${config.maxFileSize / 1024 / 1024}MB`, 24 | ); 25 | continue; 26 | } 27 | validFiles.push(file); 28 | } 29 | 30 | if (validFiles.length === 0) return []; 31 | 32 | const fileInfos = validFiles.map((file, index) => ({ 33 | name: file.name, 34 | size: file.size, 35 | type: file.type, 36 | position: getPosition(index), 37 | })); 38 | 39 | const fileIds = await createFile({ files: fileInfos }); 40 | 41 | // Start uploads for each file 42 | for (let i = 0; i < validFiles.length; i++) 43 | void uploadFile(validFiles[i], fileIds[i]); 44 | 45 | return fileIds; 46 | }; 47 | 48 | return { createAndUploadFiles }; 49 | } 50 | -------------------------------------------------------------------------------- /src/components/DeleteFileDialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | Dialog, 4 | DialogContent, 5 | DialogDescription, 6 | DialogFooter, 7 | DialogHeader, 8 | DialogTitle, 9 | } from "./ui/dialog"; 10 | import { Button } from "./ui/button"; 11 | 12 | type DeleteFileDialogProps = { 13 | open: boolean; 14 | onOpenChange: (open: boolean) => void; 15 | onConfirm: () => void; 16 | fileCount: number; 17 | }; 18 | 19 | export const DeleteFileDialog: React.FC = ({ 20 | open, 21 | onOpenChange, 22 | onConfirm, 23 | fileCount, 24 | }) => ( 25 | 51 | ); 52 | -------------------------------------------------------------------------------- /src/components/MainMenu.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | DropdownMenu, 4 | DropdownMenuContent, 5 | DropdownMenuItem, 6 | DropdownMenuTrigger, 7 | } from "./ui/dropdown-menu"; 8 | import { Button } from "./ui/button"; 9 | import { Menu, ExternalLink, Settings } from "lucide-react"; 10 | import SettingsDialog from "./SettingsDialog"; 11 | import { useSettings } from "../contexts/SettingsContext"; 12 | 13 | export const MainMenu: React.FC = () => { 14 | const [settingsOpen, setSettingsOpen] = React.useState(false); 15 | const { settings } = useSettings(); 16 | 17 | const handleDashboardClick = () => { 18 | window.open(settings.dashboardUrl, "_blank"); 19 | }; 20 | 21 | return ( 22 | <> 23 | 24 | 25 | 32 | 33 | 34 | 35 | 36 | Open Dashboard 37 | 38 | setSettingsOpen(true)}> 39 | 40 | Settings 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | }; 48 | -------------------------------------------------------------------------------- /src/hooks/useFileHandlers.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { useDropzone } from "react-dropzone"; 3 | import { useFileCreator } from "./useFileCreator"; 4 | 5 | export const useFileHandlers = () => { 6 | const fileInputRef = React.useRef(null); 7 | const { createAndUploadFiles } = useFileCreator(); 8 | 9 | const onDrop = React.useCallback( 10 | async (acceptedFiles: File[], event: React.DragEvent) => { 11 | const dropPosition = { x: event.pageX, y: event.pageY }; 12 | await createAndUploadFiles(acceptedFiles, (index) => ({ 13 | x: dropPosition.x + index * 20, 14 | y: dropPosition.y + index * 20, 15 | })); 16 | }, 17 | [createAndUploadFiles], 18 | ); 19 | 20 | const { getRootProps, isDragActive } = useDropzone({ 21 | onDrop: (files, _, event) => { 22 | void onDrop(files, event as React.DragEvent); 23 | }, 24 | noClick: true, 25 | }); 26 | 27 | const handleSelectFilesClick = () => fileInputRef.current?.click(); 28 | 29 | const handleFileInputChange = async ( 30 | e: React.ChangeEvent, 31 | ) => { 32 | const files = Array.from(e.target.files || []); 33 | const centerX = window.innerWidth / 2; 34 | const centerY = window.innerHeight / 2; 35 | 36 | await createAndUploadFiles(files, (index) => ({ 37 | x: centerX + index * 20, 38 | y: centerY + index * 20, 39 | })); 40 | 41 | if (fileInputRef.current) fileInputRef.current.value = ""; 42 | }; 43 | 44 | return { 45 | fileInputRef, 46 | getRootProps, 47 | isDragActive, 48 | handleSelectFilesClick, 49 | handleFileInputChange, 50 | }; 51 | }; 52 | -------------------------------------------------------------------------------- /src/components/FileTypeIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { 3 | Image, 4 | FileText, 5 | FileVideo, 6 | FileAudio, 7 | FileArchive, 8 | FilePlus, 9 | FileCode, 10 | } from "lucide-react"; 11 | 12 | type FileTypeIconProps = { 13 | type: string; 14 | className?: string; 15 | }; 16 | 17 | export const FileTypeIcon: React.FC = ({ 18 | type, 19 | className = "", 20 | }) => { 21 | // Helper to get icon based on mime type or extension 22 | const getIconForType = (type: string) => { 23 | // Image files 24 | if ( 25 | type.startsWith("image/") || 26 | /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(type) 27 | ) 28 | return ; 29 | 30 | // PDF files 31 | if (type === "application/pdf" || type.endsWith(".pdf")) 32 | return ; 33 | 34 | // Code files 35 | if (/\.(js|ts|jsx|tsx|html|css|json)$/i.test(type)) 36 | return ; 37 | 38 | // Text files 39 | if (type.startsWith("text/") || /\.(txt|md)$/i.test(type)) 40 | return ; 41 | 42 | // Video files 43 | if ( 44 | type.startsWith("video/") || 45 | /\.(mp4|mov|avi|wmv|flv|webm)$/i.test(type) 46 | ) 47 | return ; 48 | 49 | // Audio files 50 | if (type.startsWith("audio/") || /\.(mp3|wav|ogg|m4a)$/i.test(type)) 51 | return ; 52 | 53 | // Archive files 54 | if (/\.(zip|rar|7z|tar|gz)$/i.test(type)) 55 | return ; 56 | 57 | // Default file icon 58 | return ; 59 | }; 60 | 61 | return getIconForType(type); 62 | }; 63 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true, node: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:@typescript-eslint/recommended-type-checked", 7 | "plugin:react-hooks/recommended", 8 | ], 9 | ignorePatterns: [ 10 | "dist", 11 | ".eslintrc.cjs", 12 | "convex/_generated", 13 | "postcss.config.js", 14 | "tailwind.config.js", 15 | "vite.config.ts", 16 | // shadcn components by default violate some rules 17 | "src/components/ui", 18 | ], 19 | parser: "@typescript-eslint/parser", 20 | parserOptions: { 21 | EXPERIMENTAL_useProjectService: true, 22 | }, 23 | plugins: ["react-refresh"], 24 | rules: { 25 | "react-refresh/only-export-components": [ 26 | "warn", 27 | { allowConstantExport: true }, 28 | ], 29 | 30 | // All of these overrides ease getting into 31 | // TypeScript, and can be removed for stricter 32 | // linting down the line. 33 | 34 | // Only warn on unused variables, and ignore variables starting with `_` 35 | "@typescript-eslint/no-unused-vars": [ 36 | "warn", 37 | { varsIgnorePattern: "^_", argsIgnorePattern: "^_" }, 38 | ], 39 | 40 | // Allow escaping the compiler 41 | "@typescript-eslint/ban-ts-comment": "error", 42 | 43 | // Allow explicit `any`s 44 | "@typescript-eslint/no-explicit-any": "off", 45 | 46 | // START: Allow implicit `any`s 47 | "@typescript-eslint/no-unsafe-argument": "off", 48 | "@typescript-eslint/no-unsafe-assignment": "off", 49 | "@typescript-eslint/no-unsafe-call": "off", 50 | "@typescript-eslint/no-unsafe-member-access": "off", 51 | "@typescript-eslint/no-unsafe-return": "off", 52 | // END: Allow implicit `any`s 53 | 54 | // Allow async functions without await 55 | // for consistency (esp. Convex `handler`s) 56 | "@typescript-eslint/require-await": "off", 57 | }, 58 | }; 59 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | services: 2 | ourfiles-frontend: 3 | build: 4 | context: . 5 | args: 6 | - VITE_CONVEX_URL=http://${HOST_IP:-127.0.0.1}:${PORT:-3210} 7 | - VITE_CONVEX_DASHBOARD_URL=http://${HOST_IP:-127.0.0.1}:${DASHBOARD_PORT:-6791} 8 | restart: always 9 | ports: 10 | - "5173:80" 11 | environment: 12 | - VITE_CONVEX_URL=http://${HOST_IP:-127.0.0.1}:${PORT:-3210} 13 | - VITE_CONVEX_DASHBOARD_URL=http://${HOST_IP:-127.0.0.1}:${DASHBOARD_PORT:-6791} 14 | 15 | ourfiles-backend: 16 | build: 17 | context: . 18 | dockerfile: ./self-hosted/Dockerfile 19 | restart: always 20 | ports: 21 | - "${PORT:-3210}:3210" 22 | - "${SITE_PROXY_PORT:-3211}:3211" 23 | volumes: 24 | - data:/convex/data 25 | - ./convex:/convex/convex 26 | 27 | environment: 28 | - INSTANCE_NAME=${INSTANCE_NAME:-} 29 | - INSTANCE_SECRET=${INSTANCE_SECRET:-} 30 | - CONVEX_RELEASE_VERSION_DEV=${CONVEX_RELEASE_VERSION_DEV:-} 31 | - ACTIONS_USER_TIMEOUT_SECS=${ACTIONS_USER_TIMEOUT_SECS:-} 32 | - CONVEX_CLOUD_ORIGIN=${URL_BASE:-http://${HOST_IP:-127.0.0.1}}:${PORT:-3210} 33 | - CONVEX_SITE_ORIGIN=${URL_BASE:-http://${HOST_IP:-127.0.0.1}}:${SITE_PROXY_PORT:-3211} 34 | - DATABASE_URL=${DATABASE_URL:-} 35 | - DISABLE_BEACON=${DISABLE_BEACON:-} 36 | - REDACT_LOGS_TO_CLIENT=${REDACT_LOGS_TO_CLIENT:-false} 37 | healthcheck: 38 | test: curl -f http://localhost:3210/version 39 | interval: 5s 40 | start_period: 5s 41 | 42 | ourfiles-dashboard: 43 | image: ghcr.io/get-convex/convex-dashboard:latest 44 | restart: always 45 | ports: 46 | - "${DASHBOARD_PORT:-6791}:6791" 47 | environment: 48 | - NEXT_PUBLIC_DEPLOYMENT_URL=http://${HOST_IP:-127.0.0.1}:${PORT:-3210} 49 | depends_on: 50 | ourfiles-backend: 51 | condition: service_healthy 52 | 53 | volumes: 54 | data: 55 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | /* To change the theme colors, change the values below 6 | or use the "Copy code" button at https://ui.shadcn.com/themes */ 7 | @layer base { 8 | :root { 9 | --background: 0 0% 100%; 10 | --foreground: 20 14.3% 4.1%; 11 | 12 | --card: 0 0% 100%; 13 | --card-foreground: 20 14.3% 4.1%; 14 | 15 | --popover: 0 0% 100%; 16 | --popover-foreground: 20 14.3% 4.1%; 17 | 18 | --primary: 24 9.8% 10%; 19 | --primary-foreground: 60 9.1% 97.8%; 20 | 21 | --secondary: 60 4.8% 95.9%; 22 | --secondary-foreground: 24 9.8% 10%; 23 | 24 | --muted: 60 4.8% 95.9%; 25 | --muted-foreground: 25 5.3% 44.7%; 26 | 27 | --accent: 60 4.8% 95.9%; 28 | --accent-foreground: 24 9.8% 10%; 29 | 30 | --destructive: 0 84.2% 60.2%; 31 | --destructive-foreground: 60 9.1% 97.8%; 32 | 33 | --border: 20 5.9% 90%; 34 | --input: 20 5.9% 90%; 35 | --ring: 20 14.3% 4.1%; 36 | 37 | --radius: 0.5rem; 38 | } 39 | 40 | .dark { 41 | --background: 20 14.3% 4.1%; 42 | --foreground: 60 9.1% 97.8%; 43 | 44 | --card: 20 14.3% 4.1%; 45 | --card-foreground: 60 9.1% 97.8%; 46 | 47 | --popover: 20 14.3% 4.1%; 48 | --popover-foreground: 60 9.1% 97.8%; 49 | 50 | --primary: 60 9.1% 97.8%; 51 | --primary-foreground: 24 9.8% 10%; 52 | 53 | --secondary: 12 6.5% 15.1%; 54 | --secondary-foreground: 60 9.1% 97.8%; 55 | 56 | --muted: 12 6.5% 15.1%; 57 | --muted-foreground: 24 5.4% 63.9%; 58 | 59 | --accent: 12 6.5% 15.1%; 60 | --accent-foreground: 60 9.1% 97.8%; 61 | 62 | --destructive: 0 62.8% 30.6%; 63 | --destructive-foreground: 60 9.1% 97.8%; 64 | 65 | --border: 12 6.5% 15.1%; 66 | --input: 12 6.5% 15.1%; 67 | --ring: 24 5.7% 82.9%; 68 | } 69 | } 70 | 71 | @layer base { 72 | * { 73 | @apply border-border; 74 | } 75 | body { 76 | @apply bg-gray-50 text-foreground; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /convex/_generated/dataModel.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated data model types. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import type { 12 | DataModelFromSchemaDefinition, 13 | DocumentByName, 14 | TableNamesInDataModel, 15 | SystemTableNames, 16 | } from "convex/server"; 17 | import type { GenericId } from "convex/values"; 18 | import schema from "../schema.js"; 19 | 20 | /** 21 | * The names of all of your Convex tables. 22 | */ 23 | export type TableNames = TableNamesInDataModel; 24 | 25 | /** 26 | * The type of a document stored in Convex. 27 | * 28 | * @typeParam TableName - A string literal type of the table name (like "users"). 29 | */ 30 | export type Doc = DocumentByName< 31 | DataModel, 32 | TableName 33 | >; 34 | 35 | /** 36 | * An identifier for a document in Convex. 37 | * 38 | * Convex documents are uniquely identified by their `Id`, which is accessible 39 | * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids). 40 | * 41 | * Documents can be loaded using `db.get(id)` in query and mutation functions. 42 | * 43 | * IDs are just strings at runtime, but this type can be used to distinguish them from other 44 | * strings when type checking. 45 | * 46 | * @typeParam TableName - A string literal type of the table name (like "users"). 47 | */ 48 | export type Id = 49 | GenericId; 50 | 51 | /** 52 | * A type describing your Convex data model. 53 | * 54 | * This type includes information about what tables you have, the type of 55 | * documents stored in those tables, and the indexes defined on them. 56 | * 57 | * This type is used to parameterize methods like `queryGeneric` and 58 | * `mutationGeneric` to make them type-safe. 59 | */ 60 | export type DataModel = DataModelFromSchemaDefinition; 61 | -------------------------------------------------------------------------------- /src/components/ui/toggle-group.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"; 3 | import { VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | import { toggleVariants } from "@/components/ui/toggle"; 7 | 8 | const ToggleGroupContext = React.createContext< 9 | VariantProps 10 | >({ 11 | size: "default", 12 | variant: "default", 13 | }); 14 | 15 | const ToggleGroup = React.forwardRef< 16 | React.ElementRef, 17 | React.ComponentPropsWithoutRef & 18 | VariantProps 19 | >(({ className, variant, size, children, ...props }, ref) => ( 20 | 25 | 26 | {children} 27 | 28 | 29 | )); 30 | 31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName; 32 | 33 | const ToggleGroupItem = React.forwardRef< 34 | React.ElementRef, 35 | React.ComponentPropsWithoutRef & 36 | VariantProps 37 | >(({ className, children, variant, size, ...props }, ref) => { 38 | const context = React.useContext(ToggleGroupContext); 39 | 40 | return ( 41 | 52 | {children} 53 | 54 | ); 55 | }); 56 | 57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName; 58 | 59 | export { ToggleGroup, ToggleGroupItem }; 60 | -------------------------------------------------------------------------------- /src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Slot } from "@radix-ui/react-slot"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | }, 35 | ); 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean; 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button"; 46 | return ( 47 | 52 | ); 53 | }, 54 | ); 55 | Button.displayName = "Button"; 56 | 57 | export { Button, buttonVariants }; 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ourfiles", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "npm-run-all --parallel dev:frontend dev:backend dev:ts", 8 | "dev:self-host": "npm-run-all --parallel dev:frontend dev:backend-self-host dev:ts", 9 | "dev:frontend": "vite --open", 10 | "dev:ts": "tsc -b -w --preserveWatchOutput", 11 | "dev:backend": "convex dev --tail-logs", 12 | "dev:backend-self-host": "convex self-host dev --tail-logs", 13 | "predev": "convex dev --until-success && convex dashboard", 14 | "build": "tsc -b && vite build", 15 | "lint": "tsc && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 16 | "preview": "vite preview" 17 | }, 18 | "dependencies": { 19 | "@radix-ui/react-dialog": "^1.0.5", 20 | "@radix-ui/react-dropdown-menu": "^2.0.6", 21 | "@radix-ui/react-icons": "^1.3.0", 22 | "@radix-ui/react-slot": "^1.0.2", 23 | "@radix-ui/react-toast": "^1.2.6", 24 | "@radix-ui/react-toggle": "^1.0.3", 25 | "@radix-ui/react-toggle-group": "^1.0.4", 26 | "class-variance-authority": "^0.7.0", 27 | "clsx": "^2.1.1", 28 | "convex": "^1.19.1-alpha.0", 29 | "jszip": "^3.10.1", 30 | "lucide-react": "^0.474.0", 31 | "next-themes": "^0.3.0", 32 | "react": "^18.3.1", 33 | "react-dom": "^18.3.1", 34 | "react-dropzone": "^14.3.5", 35 | "sonner": "^1.7.4", 36 | "tailwind-merge": "^2.3.0", 37 | "tailwindcss-animate": "^1.0.7" 38 | }, 39 | "devDependencies": { 40 | "@types/node": "^20.14.9", 41 | "@types/react": "^18.3.3", 42 | "@types/react-dom": "^18.3.0", 43 | "@typescript-eslint/eslint-plugin": "^7.13.1", 44 | "@typescript-eslint/parser": "^7.13.1", 45 | "@vitejs/plugin-basic-ssl": "^1.2.0", 46 | "@vitejs/plugin-react": "^4.3.1", 47 | "autoprefixer": "^10.4.19", 48 | "eslint": "^8.57.0", 49 | "eslint-plugin-react-hooks": "^4.6.2", 50 | "eslint-plugin-react-refresh": "^0.4.7", 51 | "npm-run-all": "^4.1.5", 52 | "postcss": "^8.4.39", 53 | "prettier": "3.3.2", 54 | "tailwindcss": "^3.4.4", 55 | "typescript": "^5.2.2", 56 | "vite": "^5.3.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | const Card = React.forwardRef< 6 | HTMLDivElement, 7 | React.HTMLAttributes 8 | >(({ className, ...props }, ref) => ( 9 |

17 | )); 18 | Card.displayName = "Card"; 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |

29 | )); 30 | CardHeader.displayName = "CardHeader"; 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLParagraphElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

41 | )); 42 | CardTitle.displayName = "CardTitle"; 43 | 44 | const CardDescription = React.forwardRef< 45 | HTMLParagraphElement, 46 | React.HTMLAttributes 47 | >(({ className, ...props }, ref) => ( 48 |
53 | )); 54 | CardDescription.displayName = "CardDescription"; 55 | 56 | const CardContent = React.forwardRef< 57 | HTMLDivElement, 58 | React.HTMLAttributes 59 | >(({ className, ...props }, ref) => ( 60 |
61 | )); 62 | CardContent.displayName = "CardContent"; 63 | 64 | const CardFooter = React.forwardRef< 65 | HTMLDivElement, 66 | React.HTMLAttributes 67 | >(({ className, ...props }, ref) => ( 68 |
73 | )); 74 | CardFooter.displayName = "CardFooter"; 75 | 76 | export { 77 | Card, 78 | CardHeader, 79 | CardFooter, 80 | CardTitle, 81 | CardDescription, 82 | CardContent, 83 | }; 84 | -------------------------------------------------------------------------------- /src/contexts/SettingsContext.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | const storageKeys = { 4 | CONVEX_URL: "convexUrl", 5 | DASHBOARD_URL: "convexDashboardUrl", 6 | } as const; 7 | 8 | const envDefaults = { 9 | CONVEX_URL: import.meta.env.VITE_CONVEX_URL ?? "http://127.0.0.1:3210", 10 | DASHBOARD_URL: import.meta.env.VITE_CONVEX_DASHBOARD_URL, 11 | } as const; 12 | 13 | type Settings = { 14 | convexUrl: string; 15 | dashboardUrl: string; 16 | }; 17 | 18 | type SettingsContextType = { 19 | settings: Settings; 20 | setSettings: (settings: Settings) => void; 21 | resetSettings: () => void; 22 | }; 23 | 24 | const defaultSettings: Settings = { 25 | convexUrl: envDefaults.CONVEX_URL, 26 | dashboardUrl: envDefaults.DASHBOARD_URL, 27 | }; 28 | 29 | const loadSettings = (): Settings => { 30 | const convexUrl = localStorage.getItem(storageKeys.CONVEX_URL); 31 | const dashboardUrl = localStorage.getItem(storageKeys.DASHBOARD_URL); 32 | 33 | return { 34 | convexUrl: convexUrl ?? envDefaults.CONVEX_URL, 35 | dashboardUrl: dashboardUrl ?? envDefaults.DASHBOARD_URL, 36 | }; 37 | }; 38 | 39 | const SettingsContext = React.createContext(null); 40 | 41 | export const useSettings = () => { 42 | const context = React.useContext(SettingsContext); 43 | if (!context) 44 | throw new Error("useSettings must be used within SettingsProvider"); 45 | return context; 46 | }; 47 | 48 | export const SettingsProvider: React.FC<{ children: React.ReactNode }> = ({ 49 | children, 50 | }) => { 51 | const [settings, setSettingsState] = React.useState(loadSettings); 52 | 53 | const setSettings = (newSettings: Settings) => { 54 | localStorage.setItem(storageKeys.CONVEX_URL, newSettings.convexUrl); 55 | localStorage.setItem(storageKeys.DASHBOARD_URL, newSettings.dashboardUrl); 56 | setSettingsState(newSettings); 57 | window.location.reload(); 58 | }; 59 | 60 | const resetSettings = () => { 61 | localStorage.removeItem(storageKeys.CONVEX_URL); 62 | localStorage.removeItem(storageKeys.DASHBOARD_URL); 63 | setSettingsState(defaultSettings); 64 | window.location.reload(); 65 | }; 66 | 67 | return ( 68 | 69 | {children} 70 | 71 | ); 72 | }; 73 | -------------------------------------------------------------------------------- /src/components/SettingsDialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog"; 3 | import { Button } from "./ui/button"; 4 | import { Input } from "./ui/input"; 5 | import { useSettings } from "../contexts/SettingsContext"; 6 | 7 | const defaultConvexUrl = import.meta.env.VITE_CONVEX_URL; 8 | const defaultDashboardUrl = import.meta.env.VITE_CONVEX_DASHBOARD_URL; 9 | 10 | type SettingsDialogProps = { 11 | open: boolean; 12 | onOpenChange: (open: boolean) => void; 13 | }; 14 | 15 | const SettingsDialog: React.FC = ({ 16 | open, 17 | onOpenChange, 18 | }) => { 19 | const { settings, setSettings, resetSettings } = useSettings(); 20 | const [convexUrl, setConvexUrl] = React.useState(settings.convexUrl); 21 | const [dashboardUrl, setDashboardUrl] = React.useState(settings.dashboardUrl); 22 | 23 | const handleSave = () => { 24 | setSettings({ convexUrl, dashboardUrl }); 25 | onOpenChange(false); 26 | }; 27 | 28 | const handleReset = () => { 29 | if (!confirm("Are you sure you want to reset to default settings?")) return; 30 | resetSettings(); 31 | onOpenChange(false); 32 | }; 33 | 34 | return ( 35 | 36 | 37 | 38 | Settings 39 | 40 |
41 |
42 | Convex URL 43 | setConvexUrl(e.target.value)} 47 | placeholder={defaultConvexUrl} 48 | /> 49 |
50 |
51 | Convex Dashboard URL 52 | setDashboardUrl(e.target.value)} 56 | placeholder={defaultDashboardUrl} 57 | /> 58 |
59 |
60 |
61 | 64 | 65 |
66 | 67 | 68 | ); 69 | }; 70 | 71 | export default SettingsDialog; 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![ss1](media/ss1.png) 2 | ![ss2](media/ss2.png) 3 | ![ss3](media/ss3.png) 4 | 5 | # Our Files 6 | 7 | A simple private file storage system powered by Convex. 8 | 9 | Simply drag and drop files onto the inteface to add files, then drag them out to download them. 10 | 11 | The project is built using React, Vite, Typescript, Convex, Tailwind 12 | 13 | # Running on Localhost 14 | 15 | This project is designed to work with [Convex self-hosted](https://github.com/get-convex/convex-backend/blob/main/self-hosted/README.md). 16 | 17 | The simplest way to get everything running together is: 18 | 19 | ```sh 20 | docker compose up 21 | ``` 22 | 23 | Then open your browser to: http://localhost:5173/ 24 | 25 | ## Convex Dashboard 26 | 27 | The dashboard is started as part of the docker compose, simply visit `http://localhost:6791` 28 | 29 | You will need an admin key, run the following command to generate one: 30 | 31 | ```bash 32 | docker compose exec ourfiles-backend ./generate_admin_key.sh 33 | ``` 34 | 35 | ## Access from other devices on the LAN 36 | 37 | If you want to access the app from your devices you will need to set the "HOST_IP" environment variable before running docker compose. For example: 38 | 39 | ```sh 40 | bunx cross-env HOST_IP=192.168.1.165 docker compose up 41 | ``` 42 | 43 | Where 192.168.1.165 is the LAN IP address for your machine. You should then be able to open http://192.168.1.165:5173 on another device on your LAN. Note: if you are on Windows you may need to allow access to port 5173 in your windows firewall. 44 | 45 | Most of the features should now work. 46 | 47 | There is one exception however, the multi-file drag out uses the [FileSystemAPI](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API). This API requires a "secure" context to work, so that means the entire app needs to be run over "https" instead of "http". This means you need to access it from `https://192.168.1.150:5173` not `http://` AND the backend needs to be running securely so that its websocket is `wss` not just `ws` 48 | 49 | I currently dont know what the best way of doing this is. Some have suggested using [tailscale serve](https://tailscale.com/kb/1242/tailscale-serve) others have suggested caddy or traefik to do this. Im not certain. If you have a way to solve this in a clean way I am very open to suggestions. 50 | 51 | # Development 52 | 53 | You can develop this like any other convex project, just run `bun dev` and go through the convex setup proceedures, this will then target convex cloud. 54 | 55 | If you want to target localhost via self-hosting then checkout the convex docs for help on that: https://docs.convex.dev/self-hosting 56 | -------------------------------------------------------------------------------- /src/hooks/useOptimisticFiles.ts: -------------------------------------------------------------------------------- 1 | import { useMutation, useQuery } from "convex/react"; 2 | import { api } from "../../convex/_generated/api"; 3 | import { Doc, Id } from "../../convex/_generated/dataModel"; 4 | 5 | export function useOptimisticCreateFile() { 6 | return useMutation(api.files.create).withOptimisticUpdate( 7 | (localStore, args) => { 8 | const existingFiles = localStore.getQuery(api.files.list, {}); 9 | if (existingFiles === undefined) return; 10 | 11 | const optimisticFiles: Doc<"files">[] = args.files.map((file) => ({ 12 | _id: `${Math.random()}` as Id<"files">, 13 | _creationTime: Date.now(), 14 | uploadState: { 15 | kind: "created" as const, 16 | }, 17 | ...file, 18 | })); 19 | 20 | localStore.setQuery(api.files.list, {}, [ 21 | ...existingFiles, 22 | ...optimisticFiles, 23 | ]); 24 | }, 25 | ); 26 | } 27 | 28 | export function useOptimisticUpdateFilePosition() { 29 | return useMutation(api.files.updatePosition).withOptimisticUpdate( 30 | (localStore, args) => { 31 | const existingFiles = localStore.getQuery(api.files.list, {}); 32 | if (existingFiles === undefined) return; 33 | 34 | const updatedFiles = existingFiles.map((file) => 35 | file._id === args.id ? { ...file, position: args.position } : file, 36 | ); 37 | localStore.setQuery(api.files.list, {}, updatedFiles); 38 | }, 39 | ); 40 | } 41 | 42 | export function useOptimisticRemoveFile() { 43 | return useMutation(api.files.remove).withOptimisticUpdate( 44 | (localStore, args) => { 45 | const existingFiles = localStore.getQuery(api.files.list, {}); 46 | if (existingFiles === undefined) return; 47 | 48 | const updatedFiles = existingFiles.filter( 49 | (file) => !args.ids.includes(file._id), 50 | ); 51 | localStore.setQuery(api.files.list, {}, updatedFiles); 52 | }, 53 | ); 54 | } 55 | 56 | export function useOptimisticUpdateFilePositions() { 57 | return useMutation(api.files.updatePositions).withOptimisticUpdate( 58 | (localStore, args) => { 59 | const existingFiles = localStore.getQuery(api.files.list, {}); 60 | if (existingFiles === undefined) return; 61 | 62 | const updatedFiles = existingFiles.map((file) => { 63 | const update = args.updates.find((u) => u.id === file._id); 64 | return update ? { ...file, position: update.position } : file; 65 | }); 66 | localStore.setQuery(api.files.list, {}, updatedFiles); 67 | }, 68 | ); 69 | } 70 | 71 | export function useFiles() { 72 | return useQuery(api.files.list) ?? []; 73 | } 74 | -------------------------------------------------------------------------------- /src/components/MultiSelectOverlay.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Doc } from "../../convex/_generated/dataModel"; 3 | import { formatFileSize } from "../utils/formatters"; 4 | 5 | type MultiSelectOverlayProps = { 6 | files: Doc<"files">[]; 7 | }; 8 | 9 | export const MultiSelectOverlay: React.FC = ({ 10 | files, 11 | }) => { 12 | // Calculate bounding box of all selected files 13 | const bounds = React.useMemo(() => { 14 | if (files.length === 0) return null; 15 | 16 | let minX = Infinity; 17 | let minY = Infinity; 18 | let maxX = -Infinity; 19 | let maxY = -Infinity; 20 | 21 | const ICON_SIZE = 20; // Half of icon width/height 22 | const NAME_WIDTH = 50; // Half of max filename width (100px) 23 | const NAME_HEIGHT = 20; // Height of the filename text 24 | const PADDING = 10; // Padding around the selection 25 | const EXTRA_RIGHT_PADDING = 5; // Extra padding for the right side 26 | 27 | files.forEach((file) => { 28 | minX = Math.min(minX, file.position.x - ICON_SIZE); 29 | minY = Math.min(minY, file.position.y - ICON_SIZE); 30 | maxX = Math.max(maxX, file.position.x + NAME_WIDTH + EXTRA_RIGHT_PADDING); 31 | maxY = Math.max(maxY, file.position.y + ICON_SIZE + NAME_HEIGHT); 32 | }); 33 | 34 | return { 35 | left: minX - PADDING, 36 | top: minY - PADDING, 37 | width: maxX - minX + PADDING * 2, 38 | height: maxY - minY + PADDING * 2, 39 | }; 40 | }, [files]); 41 | 42 | if (!bounds || files.length <= 1) return null; 43 | 44 | const totalSize = files.reduce((sum, file) => sum + file.size, 0); 45 | 46 | return ( 47 | <> 48 | {/* Dotted selection box /} 49 |
58 | {/ Multi-select tooltip */} 59 |
67 |
68 |
69 | {files.length} {files.length === 1 ? "file" : "files"} selected 70 |
71 |
72 | Total size: {formatFileSize(totalSize)} 73 |
74 |
75 |
76 | 77 | ); 78 | }; 79 | -------------------------------------------------------------------------------- /convex/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to your Convex functions directory! 2 | 3 | Write your Convex functions here. 4 | See https://docs.convex.dev/functions for more. 5 | 6 | A query function that takes two arguments looks like: 7 | 8 | ```ts 9 | // functions.js 10 | import { query } from "./_generated/server"; 11 | import { v } from "convex/values"; 12 | 13 | export const myQueryFunction = query({ 14 | // Validators for arguments. 15 | args: { 16 | first: v.number(), 17 | second: v.string(), 18 | }, 19 | 20 | // Function implementation. 21 | handler: async (ctx, args) => { 22 | // Read the database as many times as you need here. 23 | // See https://docs.convex.dev/database/reading-data. 24 | const documents = await ctx.db.query("tablename").collect(); 25 | 26 | // Arguments passed from the client are properties of the args object. 27 | console.log(args.first, args.second); 28 | 29 | // Write arbitrary JavaScript here: filter, aggregate, build derived data, 30 | // remove non-public properties, or create new objects. 31 | return documents; 32 | }, 33 | }); 34 | ``` 35 | 36 | Using this query function in a React component looks like: 37 | 38 | ```ts 39 | const data = useQuery(api.functions.myQueryFunction, { 40 | first: 10, 41 | second: "hello", 42 | }); 43 | ``` 44 | 45 | A mutation function looks like: 46 | 47 | ```ts 48 | // functions.js 49 | import { mutation } from "./_generated/server"; 50 | import { v } from "convex/values"; 51 | 52 | export const myMutationFunction = mutation({ 53 | // Validators for arguments. 54 | args: { 55 | first: v.string(), 56 | second: v.string(), 57 | }, 58 | 59 | // Function implementation. 60 | handler: async (ctx, args) => { 61 | // Insert or modify documents in the database here. 62 | // Mutations can also read from the database like queries. 63 | // See https://docs.convex.dev/database/writing-data. 64 | const message = { body: args.first, author: args.second }; 65 | const id = await ctx.db.insert("messages", message); 66 | 67 | // Optionally, return a value from your mutation. 68 | return await ctx.db.get(id); 69 | }, 70 | }); 71 | ``` 72 | 73 | Using this mutation function in a React component looks like: 74 | 75 | ```ts 76 | const mutation = useMutation(api.functions.myMutationFunction); 77 | function handleButtonPress() { 78 | // fire and forget, the most common way to use mutations 79 | mutation({ first: "Hello!", second: "me" }); 80 | // OR 81 | // use the result once the mutation has completed 82 | mutation({ first: "Hello!", second: "me" }).then((result) => 83 | console.log(result), 84 | ); 85 | } 86 | ``` 87 | 88 | Use the Convex CLI to push your functions to a deployment. See everything 89 | the Convex CLI can do by running `npx convex -h` in your project root 90 | directory. To learn more, launch the docs with `npx convex docs`. 91 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | darkMode: "selector", 4 | content: [ 5 | "./pages/**/*.{ts,tsx}", 6 | "./components/**/*.{ts,tsx}", 7 | "./app/**/*.{ts,tsx}", 8 | "./src/**/.{ts,tsx}", 9 | ], 10 | safelist: ["dark"], 11 | prefix: "", 12 | theme: { 13 | container: { 14 | center: true, 15 | padding: "2rem", 16 | screens: { 17 | sm: "1000px", 18 | }, 19 | }, 20 | extend: { 21 | colors: { 22 | border: "hsl(var(--border))", 23 | input: "hsl(var(--input))", 24 | ring: "hsl(var(--ring))", 25 | background: "hsl(var(--background))", 26 | foreground: "hsl(var(--foreground))", 27 | primary: { 28 | DEFAULT: "hsl(var(--primary))", 29 | foreground: "hsl(var(--primary-foreground))", 30 | }, 31 | secondary: { 32 | DEFAULT: "hsl(var(--secondary))", 33 | foreground: "hsl(var(--secondary-foreground))", 34 | }, 35 | destructive: { 36 | DEFAULT: "hsl(var(--destructive))", 37 | foreground: "hsl(var(--destructive-foreground))", 38 | }, 39 | muted: { 40 | DEFAULT: "hsl(var(--muted))", 41 | foreground: "hsl(var(--muted-foreground))", 42 | }, 43 | accent: { 44 | DEFAULT: "hsl(var(--accent))", 45 | foreground: "hsl(var(--accent-foreground))", 46 | }, 47 | popover: { 48 | DEFAULT: "hsl(var(--popover))", 49 | foreground: "hsl(var(--popover-foreground))", 50 | }, 51 | card: { 52 | DEFAULT: "hsl(var(--card))", 53 | foreground: "hsl(var(--card-foreground))", 54 | }, 55 | }, 56 | borderRadius: { 57 | lg: "var(--radius)", 58 | md: "calc(var(--radius) - 2px)", 59 | sm: "calc(var(--radius) - 4px)", 60 | }, 61 | keyframes: { 62 | "accordion-down": { 63 | from: { height: "0" }, 64 | to: { height: "var(--radix-accordion-content-height)" }, 65 | }, 66 | "accordion-up": { 67 | from: { height: "var(--radix-accordion-content-height)" }, 68 | to: { height: "0" }, 69 | }, 70 | "popIn": { 71 | "0%": { 72 | opacity: "0", 73 | transform: "translate(-50%, -100%) scale(0.95)" 74 | }, 75 | "50%": { 76 | opacity: "1", 77 | transform: "translate(-50%, -100%) scale(1.05)" 78 | }, 79 | "100%": { 80 | opacity: "1", 81 | transform: "translate(-50%, -100%) scale(1)" 82 | } 83 | } 84 | }, 85 | animation: { 86 | "accordion-down": "accordion-down 0.2s ease-out", 87 | "accordion-up": "accordion-up 0.2s ease-out", 88 | "popIn": "popIn 200ms cubic-bezier(.17,.67,.39,1.32)" 89 | }, 90 | }, 91 | }, 92 | plugins: [require("tailwindcss-animate")], 93 | }; 94 | -------------------------------------------------------------------------------- /src/hooks/useSelectionBox.ts: -------------------------------------------------------------------------------- 1 | import as React from "react"; 2 | import { Id } from "../../convex/_generated/dataModel"; 3 | 4 | type Position = { x: number; y: number }; 5 | 6 | export const useSelectionBox = ({ 7 | files, 8 | onSelectionChange, 9 | }: { 10 | files: { _id: Id<"files">; position: Position }[]; 11 | onSelectionChange: (selectedIds: Set>) => void; 12 | }) => { 13 | const [isDragSelecting, setIsDragSelecting] = React.useState(false); 14 | const [selectionStart, setSelectionStart] = React.useState({ 15 | x: 0, 16 | y: 0, 17 | }); 18 | const [selectionCurrent, setSelectionCurrent] = React.useState({ 19 | x: 0, 20 | y: 0, 21 | }); 22 | 23 | const handleMouseDown = (e: React.MouseEvent) => { 24 | if (e.button !== 0 || e.target !== e.currentTarget) return; 25 | setIsDragSelecting(true); 26 | setSelectionStart({ x: e.pageX, y: e.pageY }); 27 | setSelectionCurrent({ x: e.pageX, y: e.pageY }); 28 | onSelectionChange(new Set()); 29 | }; 30 | 31 | const updateSelection = (current: Position) => { 32 | // Calculate selection box bounds 33 | const left = Math.min(selectionStart.x, current.x); 34 | const right = Math.max(selectionStart.x, current.x); 35 | const top = Math.min(selectionStart.y, current.y); 36 | const bottom = Math.max(selectionStart.y, current.y); 37 | 38 | // Find files that intersect with the selection box 39 | const selectedIds = new Set>(); 40 | for (const file of files) { 41 | const fileLeft = file.position.x - 20; 42 | const fileRight = file.position.x + 20; 43 | const fileTop = file.position.y - 20; 44 | const fileBottom = file.position.y + 20; 45 | 46 | if ( 47 | fileLeft < right && 48 | fileRight > left && 49 | fileTop < bottom && 50 | fileBottom > top 51 | ) 52 | selectedIds.add(file._id); 53 | } 54 | onSelectionChange(selectedIds); 55 | }; 56 | 57 | React.useEffect(() => { 58 | const handleGlobalMouseMove = (e: MouseEvent) => { 59 | if (!isDragSelecting) return; 60 | 61 | // Clamp coordinates to window boundaries 62 | const x = Math.max(0, Math.min(e.pageX, window.innerWidth)); 63 | const y = Math.max(0, Math.min(e.pageY, window.innerHeight)); 64 | 65 | setSelectionCurrent({ x, y }); 66 | updateSelection({ x, y }); 67 | }; 68 | 69 | const handleGlobalMouseUp = () => setIsDragSelecting(false); 70 | 71 | if (isDragSelecting) { 72 | window.addEventListener("mousemove", handleGlobalMouseMove); 73 | window.addEventListener("mouseup", handleGlobalMouseUp); 74 | } 75 | 76 | return () => { 77 | window.removeEventListener("mousemove", handleGlobalMouseMove); 78 | window.removeEventListener("mouseup", handleGlobalMouseUp); 79 | }; 80 | }, [isDragSelecting, selectionStart, files, updateSelection]); 81 | 82 | return { 83 | isDragSelecting, 84 | selectionStart, 85 | selectionCurrent, 86 | handleMouseDown, 87 | }; 88 | }; 89 | -------------------------------------------------------------------------------- /src/hooks/useFileUploader.ts: -------------------------------------------------------------------------------- 1 | import { useMutation } from "convex/react"; 2 | import { api } from "../../convex/_generated/api"; 3 | import { Id } from "../../convex/_generated/dataModel"; 4 | import { toast } from "sonner"; 5 | 6 | export function useFileUploader() { 7 | const generateUploadUrl = useMutation(api.files.generateUploadUrl); 8 | const startUpload = useMutation(api.files.startUpload); 9 | const updateUploadProgress = useMutation(api.files.updateUploadProgress); 10 | const completeUpload = useMutation(api.files.completeUpload); 11 | const setErrorState = useMutation(api.files.setErrorState); 12 | 13 | const getErrorMessage = (xhr: XMLHttpRequest): string => { 14 | try { 15 | const response = JSON.parse(xhr.responseText); 16 | if (response.message) return response.message; 17 | if (response.error) return response.error; 18 | } catch (e) { 19 | // If we can't parse the response, fall back to status text 20 | } 21 | return xhr.statusText || `Upload failed with status ${xhr.status}`; 22 | }; 23 | 24 | const uploadFile = async (file: File, fileId: Id<"files">) => { 25 | try { 26 | // First mark the file as uploading 27 | await startUpload({ id: fileId }); 28 | 29 | // Then generate upload URL and upload the file 30 | const uploadUrl = await generateUploadUrl(); 31 | 32 | // Create a promise that resolves when the upload is complete 33 | await new Promise((resolve, reject) => { 34 | const xhr = new XMLHttpRequest(); 35 | xhr.open("POST", uploadUrl); 36 | xhr.setRequestHeader( 37 | "Content-Type", 38 | file.type || "application/octet-stream", 39 | ); 40 | 41 | let lastUpdate = 0; 42 | xhr.upload.onprogress = (event) => { 43 | if (event.lengthComputable) { 44 | const now = Date.now(); 45 | if (now - lastUpdate >= 1000) { 46 | const progress = Math.round((event.loaded / event.total) * 100); 47 | void updateUploadProgress({ id: fileId, progress }); 48 | lastUpdate = now; 49 | } 50 | } 51 | }; 52 | 53 | xhr.onload = async () => { 54 | if (xhr.status === 200) { 55 | const { storageId } = JSON.parse(xhr.responseText); 56 | await completeUpload({ id: fileId, storageId }); 57 | resolve(undefined); 58 | } else { 59 | reject(new Error(getErrorMessage(xhr))); 60 | } 61 | }; 62 | 63 | xhr.onerror = () => { 64 | const message = getErrorMessage(xhr); 65 | reject(new Error(message || "Network error during upload")); 66 | }; 67 | xhr.send(file); 68 | }); 69 | } catch (error) { 70 | console.error("Upload failed:", error); 71 | const errorMessage = 72 | error instanceof Error ? error.message : "Unknown error occurred"; 73 | await setErrorState({ id: fileId, message: errorMessage }); 74 | toast.error(`Failed to upload ${file.name}`, { 75 | description: errorMessage, 76 | }); 77 | } 78 | }; 79 | 80 | return { uploadFile }; 81 | } 82 | -------------------------------------------------------------------------------- /convex/_generated/server.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated utilities for implementing server-side Convex query and mutation functions. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import { 12 | actionGeneric, 13 | httpActionGeneric, 14 | queryGeneric, 15 | mutationGeneric, 16 | internalActionGeneric, 17 | internalMutationGeneric, 18 | internalQueryGeneric, 19 | } from "convex/server"; 20 | 21 | /** 22 | * Define a query in this Convex app's public API. 23 | * 24 | * This function will be allowed to read your Convex database and will be accessible from the client. 25 | * 26 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 27 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 28 | */ 29 | export const query = queryGeneric; 30 | 31 | /** 32 | * Define a query that is only accessible from other Convex functions (but not from the client). 33 | * 34 | * This function will be allowed to read from your Convex database. It will not be accessible from the client. 35 | * 36 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 37 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 38 | */ 39 | export const internalQuery = internalQueryGeneric; 40 | 41 | /** 42 | * Define a mutation in this Convex app's public API. 43 | * 44 | * This function will be allowed to modify your Convex database and will be accessible from the client. 45 | * 46 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 47 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 48 | */ 49 | export const mutation = mutationGeneric; 50 | 51 | /** 52 | * Define a mutation that is only accessible from other Convex functions (but not from the client). 53 | * 54 | * This function will be allowed to modify your Convex database. It will not be accessible from the client. 55 | * 56 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 57 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 58 | */ 59 | export const internalMutation = internalMutationGeneric; 60 | 61 | /** 62 | * Define an action in this Convex app's public API. 63 | * 64 | * An action is a function which can execute any JavaScript code, including non-deterministic 65 | * code and code with side-effects, like calling third-party services. 66 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. 67 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. 68 | * 69 | * @param func - The action. It receives an {@link ActionCtx} as its first argument. 70 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible. 71 | */ 72 | export const action = actionGeneric; 73 | 74 | /** 75 | * Define an action that is only accessible from other Convex functions (but not from the client). 76 | * 77 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 78 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible. 79 | */ 80 | export const internalAction = internalActionGeneric; 81 | 82 | /** 83 | * Define a Convex HTTP action. 84 | * 85 | * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object 86 | * as its second. 87 | * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`. 88 | / 89 | export const httpAction = httpActionGeneric; 90 | -------------------------------------------------------------------------------- /src/components/UploadStatusIndicator.tsx: -------------------------------------------------------------------------------- 1 | import as React from "react"; 2 | import { Doc } from "../../convex/_generated/dataModel"; 3 | 4 | export const UploadStatusIndicator: React.FC<{ file: Doc<"files"> }> = ({ 5 | file, 6 | }) => { 7 | const state = file.uploadState; 8 | 9 | const baseStyle: React.CSSProperties = { 10 | position: "absolute", 11 | top: -4, 12 | right: -4, 13 | width: 16, 14 | height: 16, 15 | borderRadius: 8, 16 | display: "flex", 17 | alignItems: "center", 18 | justifyContent: "center", 19 | border: "1.5px solid white", 20 | boxShadow: "0 0 0 1px rgba(0,0,0,0.1)", 21 | }; 22 | 23 | if (state.kind === "created") 24 | return ( 25 |
31 | 45 |
46 | ); 47 | 48 | if (state.kind === "uploading") 49 | return ( 50 |
56 |
68 | 83 |
84 | ); 85 | 86 | if (state.kind === "errored") 87 | return ( 88 |
94 | 108 |
109 | ); 110 | 111 | if (state.kind === "uploaded") 112 | return ( 113 |
119 | 134 |
135 | ); 136 | 137 | // TypeScript will ensure we've handled all cases 138 | const _exhaustiveCheck: never = state; 139 | return null; 140 | }; 141 | -------------------------------------------------------------------------------- /src/hooks/useDragPosition.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Id } from "../../convex/_generated/dataModel"; 3 | 4 | type Position = { x: number; y: number }; 5 | type FileUpdate = { id: Id<"files">; position: Position }; 6 | type RelativePosition = { id: Id<"files">; offsetX: number; offsetY: number }; 7 | 8 | export const useDragPosition = ({ 9 | basePosition, 10 | baseId, 11 | relativeFiles, 12 | onDragEnd, 13 | }: { 14 | basePosition: Position; 15 | baseId: Id<"files">; 16 | relativeFiles: { id: Id<"files">; position: Position }[]; 17 | onDragEnd: (updates: FileUpdate[]) => void; 18 | }) => { 19 | const [dragPosition, setDragPosition] = React.useState({ 20 | x: 0, 21 | y: 0, 22 | }); 23 | const [mouseOffset, setMouseOffset] = React.useState({ 24 | x: 0, 25 | y: 0, 26 | }); 27 | const [isDragging, setIsDragging] = React.useState(false); 28 | 29 | // Calculate relative positions of all files to the dragged file 30 | const relativePositions = React.useMemo(() => { 31 | if (relativeFiles.length === 0) return []; 32 | return relativeFiles 33 | .filter((f) => f.id !== baseId) 34 | .map((f) => ({ 35 | id: f.id, 36 | offsetX: f.position.x - basePosition.x, 37 | offsetY: f.position.y - basePosition.y, 38 | })); 39 | }, [relativeFiles, basePosition, baseId]); 40 | 41 | const handleDragStart = (e: React.DragEvent | React.TouchEvent) => { 42 | setIsDragging(true); 43 | const rect = (e.target as HTMLElement).getBoundingClientRect(); 44 | const clientX = "touches" in e ? e.touches[0].clientX : e.clientX; 45 | const clientY = "touches" in e ? e.touches[0].clientY : e.clientY; 46 | 47 | const offsetX = clientX - rect.left; 48 | const offsetY = clientY - rect.top; 49 | setMouseOffset({ x: offsetX, y: offsetY }); 50 | 51 | const newPosition = { 52 | x: clientX - offsetX + 20, 53 | y: clientY - offsetY + 20, 54 | }; 55 | setDragPosition(newPosition); 56 | 57 | if ("dataTransfer" in e) { 58 | const dragImage = new Image(); 59 | dragImage.src = 60 | "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"; 61 | e.dataTransfer.setDragImage(dragImage, 0, 0); 62 | } 63 | }; 64 | 65 | const handleDrag = (e: React.DragEvent | React.TouchEvent) => { 66 | if (!isDragging) return; 67 | 68 | const clientX = "touches" in e ? e.touches[0].clientX : e.clientX; 69 | const clientY = "touches" in e ? e.touches[0].clientY : e.clientY; 70 | 71 | // Skip if no coordinates (can happen during drag) 72 | if (!clientX || !clientY) return; 73 | 74 | const newPosition = { 75 | x: clientX - mouseOffset.x + 20, 76 | y: clientY - mouseOffset.y + 20, 77 | }; 78 | setDragPosition(newPosition); 79 | }; 80 | 81 | const handleDragEnd = (e: React.DragEvent | React.TouchEvent) => { 82 | setIsDragging(false); 83 | 84 | const clientX = 85 | "changedTouches" in e ? e.changedTouches[0].clientX : e.clientX; 86 | const clientY = 87 | "changedTouches" in e ? e.changedTouches[0].clientY : e.clientY; 88 | 89 | // If dropped inside the window, update positions 90 | if ( 91 | clientX > 0 && 92 | clientY > 0 && 93 | clientX < window.innerWidth && 94 | clientY < window.innerHeight 95 | ) { 96 | const newPosition = { 97 | x: clientX - mouseOffset.x + 20, 98 | y: clientY - mouseOffset.y + 20, 99 | }; 100 | 101 | // Create updates for all selected files 102 | const updates: FileUpdate[] = [ 103 | { id: baseId, position: newPosition }, 104 | ...relativePositions.map(({ id, offsetX, offsetY }) => ({ 105 | id, 106 | position: { 107 | x: newPosition.x + offsetX, 108 | y: newPosition.y + offsetY, 109 | }, 110 | })), 111 | ]; 112 | onDragEnd(updates); 113 | } 114 | }; 115 | 116 | return { 117 | dragPosition, 118 | isDragging, 119 | handleDragStart, 120 | handleDrag, 121 | handleDragEnd, 122 | relativePositions, 123 | }; 124 | }; 125 | -------------------------------------------------------------------------------- /src/components/SelectedItem.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { FileIcon } from "./FileIcon"; 3 | import { FileTooltip } from "./FileTooltip"; 4 | import { Doc, Id } from "../../convex/_generated/dataModel"; 5 | import { useFileDownloadDrag } from "../hooks/useFileDownloadDrag"; 6 | import { MultiFileDownloadDialog } from "./MultiFileDownloadDialog"; 7 | import { toast } from "sonner"; 8 | import { useDragPosition } from "../hooks/useDragPosition"; 9 | import { FileGhostPreview } from "./FileGhostPreview"; 10 | import useIsMobile from "@/hooks/useIsMobile"; 11 | 12 | type SelectedItemProps = { 13 | file: Doc<"files">; 14 | allSelectedFiles: Doc<"files">[]; 15 | onDragEnd: ( 16 | updates: { id: Id<"files">; position: { x: number; y: number } }[], 17 | ) => void; 18 | onDelete?: () => void; 19 | onClick: (e: React.MouseEvent) => void; 20 | disableTooltip?: boolean; 21 | }; 22 | 23 | export const SelectedItem: React.FC = ({ 24 | file, 25 | allSelectedFiles, 26 | onDragEnd, 27 | onDelete, 28 | disableTooltip, 29 | onClick, 30 | }) => { 31 | const { 32 | isDragging: isExternalDragging, 33 | handleDragStart: handleExternalDragStart, 34 | handleDragEnd: handleExternalDragEnd, 35 | canDownload, 36 | showDownloadDialog, 37 | setShowDownloadDialog, 38 | downloadMultipleFiles, 39 | fileCount, 40 | } = useFileDownloadDrag({ 41 | files: allSelectedFiles.length > 1 ? allSelectedFiles : [file], 42 | singleFile: allSelectedFiles.length === 1, 43 | }); 44 | 45 | const { 46 | dragPosition, 47 | isDragging: isInternalDragging, 48 | handleDragStart, 49 | handleDrag, 50 | handleDragEnd, 51 | relativePositions, 52 | } = useDragPosition({ 53 | basePosition: file.position, 54 | baseId: file._id, 55 | relativeFiles: allSelectedFiles.map((f) => ({ 56 | id: f._id, 57 | position: f.position, 58 | })), 59 | onDragEnd, 60 | }); 61 | 62 | const handleDragStartWrapper = (e: React.DragEvent) => { 63 | handleDragStart(e); 64 | if (canDownload) handleExternalDragStart(e); 65 | }; 66 | 67 | const handleDragEndWrapper = (e: React.DragEvent) => { 68 | handleDragEnd(e); 69 | 70 | // Only handle external drag end when dropping outside the window 71 | if ( 72 | e.clientX <= 0 || 73 | e.clientY <= 0 || 74 | e.clientX >= window.innerWidth || 75 | e.clientY >= window.innerHeight 76 | ) { 77 | handleExternalDragEnd(); 78 | if (allSelectedFiles.length === 1) 79 | toast.success(`Downloaded ${file.name}`); 80 | } 81 | }; 82 | 83 | const isMobile = useIsMobile(); 84 | const isTooltipOpen = 85 | !disableTooltip && !isExternalDragging && !isInternalDragging; 86 | const isDragDisabled = isMobile && !isTooltipOpen; 87 | 88 | return ( 89 | <> 90 | 113 | ) : undefined 114 | } 115 | /> 116 | 117 | {isInternalDragging && ( 118 | 124 | )} 125 | 126 | void downloadMultipleFiles()} 130 | fileCount={fileCount} 131 | /> 132 | 133 | ); 134 | }; 135 | -------------------------------------------------------------------------------- /src/components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as DialogPrimitive from "@radix-ui/react-dialog"; 3 | import { Cross2Icon } from "@radix-ui/react-icons"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const Dialog = DialogPrimitive.Root; 8 | 9 | const DialogTrigger = DialogPrimitive.Trigger; 10 | 11 | const DialogPortal = DialogPrimitive.Portal; 12 | 13 | const DialogClose = DialogPrimitive.Close; 14 | 15 | const DialogOverlay = React.forwardRef< 16 | React.ElementRef, 17 | React.ComponentPropsWithoutRef 18 | >(({ className, ...props }, ref) => ( 19 | 27 | )); 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; 29 | 30 | const DialogContent = React.forwardRef< 31 | React.ElementRef, 32 | React.ComponentPropsWithoutRef 33 | >(({ className, children, ...props }, ref) => ( 34 | 35 | 36 | 44 | {children} 45 | 46 | 47 | Close 48 | 49 | 50 | 51 | )); 52 | DialogContent.displayName = DialogPrimitive.Content.displayName; 53 | 54 | const DialogHeader = ({ 55 | className, 56 | ...props 57 | }: React.HTMLAttributes) => ( 58 |
65 | ); 66 | DialogHeader.displayName = "DialogHeader"; 67 | 68 | const DialogFooter = ({ 69 | className, 70 | ...props 71 | }: React.HTMLAttributes) => ( 72 |
79 | ); 80 | DialogFooter.displayName = "DialogFooter"; 81 | 82 | const DialogTitle = React.forwardRef< 83 | React.ElementRef, 84 | React.ComponentPropsWithoutRef 85 | >(({ className, ...props }, ref) => ( 86 | 94 | )); 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName; 96 | 97 | const DialogDescription = React.forwardRef< 98 | React.ElementRef, 99 | React.ComponentPropsWithoutRef 100 | >(({ className, ...props }, ref) => ( 101 | 106 | )); 107 | DialogDescription.displayName = DialogPrimitive.Description.displayName; 108 | 109 | export { 110 | Dialog, 111 | DialogPortal, 112 | DialogOverlay, 113 | DialogTrigger, 114 | DialogClose, 115 | DialogContent, 116 | DialogHeader, 117 | DialogFooter, 118 | DialogTitle, 119 | DialogDescription, 120 | }; 121 | -------------------------------------------------------------------------------- /src/hooks/useFileDownloadDrag.ts: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Doc } from "../../convex/_generated/dataModel"; 3 | import { toast } from "sonner"; 4 | 5 | // Add type declarations for the File System Access API 6 | declare global { 7 | interface Window { 8 | showDirectoryPicker(options?: { 9 | mode?: "read" | "readwrite"; 10 | }): Promise; 11 | } 12 | } 13 | 14 | type UseFileDownloadDragProps = { 15 | files: Doc<"files">[]; 16 | singleFile?: boolean; 17 | }; 18 | 19 | export function useFileDownloadDrag({ 20 | files, 21 | singleFile, 22 | }: UseFileDownloadDragProps) { 23 | const [isDragging, setIsDragging] = useState(false); 24 | const [showDownloadDialog, setShowDownloadDialog] = useState(false); 25 | 26 | // Only use uploaded files 27 | const uploadedFiles = files.filter((f) => f.uploadState.kind === "uploaded"); 28 | 29 | const downloadMultipleFiles = async () => { 30 | try { 31 | // Create a directory handle 32 | const dirHandle = await window.showDirectoryPicker({ 33 | mode: "readwrite", 34 | }); 35 | 36 | const toastId = toast.loading( 37 | `Downloading ${uploadedFiles.length} files...`, 38 | { 39 | description: "Starting download...", 40 | }, 41 | ); 42 | 43 | let completedFiles = 0; 44 | 45 | // Download each file and write it to the directory 46 | await Promise.all( 47 | uploadedFiles.map(async (file) => { 48 | if (file.uploadState.kind !== "uploaded") return; 49 | 50 | try { 51 | const response = await fetch(file.uploadState.url); 52 | const blob = await response.blob(); 53 | 54 | const fileHandle = await dirHandle.getFileHandle(file.name, { 55 | create: true, 56 | }); 57 | const writable = await fileHandle.createWritable(); 58 | await writable.write(blob); 59 | await writable.close(); 60 | 61 | completedFiles++; 62 | toast.loading(`Downloading ${uploadedFiles.length} files...`, { 63 | id: toastId, 64 | description: `Downloaded ${completedFiles} of ${uploadedFiles.length} files`, 65 | }); 66 | } catch (error) { 67 | console.error(`Failed to download ${file.name}:`, error); 68 | toast.error(`Failed to download ${file.name}`); 69 | } 70 | }), 71 | ); 72 | 73 | toast.success(`Downloaded ${completedFiles} files`, { 74 | id: toastId, 75 | description: 76 | completedFiles === uploadedFiles.length 77 | ? "All files downloaded successfully" 78 | : `${uploadedFiles.length - completedFiles} files failed to download`, 79 | }); 80 | } catch (error: unknown) { 81 | if (error instanceof Error && error.name !== "AbortError") { 82 | console.error("Failed to save files:", error); 83 | toast.error("Failed to download files", { 84 | description: error.message, 85 | }); 86 | } 87 | } 88 | setShowDownloadDialog(false); 89 | }; 90 | 91 | // Set up drag leave handler 92 | useEffect(() => { 93 | if (!isDragging || singleFile || uploadedFiles.length <= 1) return; 94 | 95 | const handleDragLeave = (e: DragEvent) => { 96 | // Only handle if actually leaving the window 97 | if (e.relatedTarget === null) { 98 | setShowDownloadDialog(true); 99 | } 100 | }; 101 | 102 | window.addEventListener("dragleave", handleDragLeave); 103 | return () => window.removeEventListener("dragleave", handleDragLeave); 104 | }, [isDragging, singleFile, uploadedFiles.length]); 105 | 106 | const handleDragStart = (e: React.DragEvent) => { 107 | setIsDragging(true); 108 | if (!uploadedFiles.length) return; 109 | 110 | // If single file or only one file is selected, use simple format 111 | if (singleFile || uploadedFiles.length === 1) { 112 | const file = uploadedFiles[0]; 113 | if (file.uploadState.kind === "uploaded") { 114 | e.dataTransfer.effectAllowed = "copy"; 115 | e.dataTransfer.setData( 116 | "DownloadURL", 117 | `${file.type}:${file.name}:${file.uploadState.url}`, 118 | ); 119 | } 120 | return; 121 | } 122 | 123 | // For multiple files, just set the effect 124 | e.dataTransfer.effectAllowed = "copy"; 125 | e.dataTransfer.setData("text/plain", "multiple files"); 126 | }; 127 | 128 | const handleDragEnd = () => { 129 | setIsDragging(false); 130 | }; 131 | 132 | return { 133 | isDragging, 134 | handleDragStart, 135 | handleDragEnd, 136 | showDownloadDialog, 137 | setShowDownloadDialog, 138 | downloadMultipleFiles, 139 | fileCount: uploadedFiles.length, 140 | canDownload: uploadedFiles.length > 0, 141 | }; 142 | } 143 | -------------------------------------------------------------------------------- /src/components/FileIcon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Doc } from "../../convex/_generated/dataModel"; 3 | import { UploadStatusIndicator } from "./UploadStatusIndicator"; 4 | import { FileTypeIcon } from "./FileTypeIcon"; 5 | 6 | type FileIconProps = { 7 | file: Doc<"files">; 8 | isSelected: boolean; 9 | onClick?: (e: React.MouseEvent) => void; 10 | onMouseDown?: (e: React.MouseEvent) => void; 11 | style?: React.CSSProperties; 12 | onDragStart?: (e: React.DragEvent) => void; 13 | onDrag?: (e: React.DragEvent) => void; 14 | onDragEnd?: (e: React.DragEvent) => void; 15 | onTouchStart?: (e: React.TouchEvent) => void; 16 | onTouchMove?: (e: React.TouchEvent) => void; 17 | onTouchEnd?: (e: React.TouchEvent) => void; 18 | tooltip?: React.ReactNode; 19 | draggable?: boolean; 20 | animate?: boolean; 21 | disableTooltip?: boolean; 22 | }; 23 | 24 | export const FileIcon: React.FC = ({ 25 | file, 26 | isSelected, 27 | onClick, 28 | onMouseDown, 29 | style, 30 | onDragStart, 31 | onDrag, 32 | onDragEnd, 33 | onTouchStart, 34 | onTouchMove, 35 | onTouchEnd, 36 | tooltip, 37 | draggable, 38 | animate = false, 39 | disableTooltip, 40 | }) => { 41 | const [isDragging, setIsDragging] = React.useState(false); 42 | 43 | const handleDoubleClick = (e: React.MouseEvent) => { 44 | e.stopPropagation(); 45 | if (file.uploadState.kind === "uploaded") 46 | window.open(file.uploadState.url, "_blank"); 47 | }; 48 | 49 | // Don't apply transitions if this is a ghost preview (has pointer-events: none) 50 | const isGhostPreview = style?.pointerEvents === "none"; 51 | 52 | const left = file.position.x - 20; 53 | const top = file.position.y - 20; 54 | 55 | return ( 56 | <> 57 |
{ 72 | setIsDragging(true); 73 | onDragStart?.(e); 74 | } 75 | : undefined 76 | } 77 | onDrag={onDrag} 78 | onDragEnd={ 79 | onDragEnd 80 | ? (e: React.DragEvent) => { 81 | setIsDragging(false); 82 | onDragEnd?.(e); 83 | } 84 | : undefined 85 | } 86 | onTouchStart={onTouchStart} 87 | onTouchMove={onTouchMove} 88 | onTouchEnd={onTouchEnd} 89 | > 90 |
91 |
101 | 105 | {(file.uploadState.kind === "uploading" || 106 | file.uploadState.kind === "errored") && ( 107 |
110 |
119 |
120 | )} 121 |
122 | 123 |
124 | 130 | {file.name} 131 | 132 |
133 | {!disableTooltip && tooltip && ( 134 |
141 | {tooltip} 142 |
143 | )} 144 | 145 | ); 146 | }; 147 | -------------------------------------------------------------------------------- /src/components/FileUpload.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { SelectedItem } from "./SelectedItem"; 3 | import { UnselectedItem } from "./UnselectedItem"; 4 | import { AddItemsButton } from "./SelectFilesButton"; 5 | import { DropZoneOverlay } from "./DropZoneOverlay"; 6 | import { EmptyState } from "./EmptyState"; 7 | import { SelectionBox } from "./SelectionBox"; 8 | import { Id } from "../../convex/_generated/dataModel"; 9 | import { TopRightItems } from "./TopRightItems"; 10 | import { MultiSelectOverlay } from "./MultiSelectOverlay"; 11 | import { DeleteFileDialog } from "./DeleteFileDialog"; 12 | import { Toaster } from "./ui/toast"; 13 | import { useQuery } from "convex/react"; 14 | import { api } from "../../convex/_generated/api"; 15 | import { 16 | useOptimisticUpdateFilePositions, 17 | useOptimisticRemoveFile, 18 | } from "../hooks/useOptimisticFiles"; 19 | import { useSelectionBox } from "../hooks/useSelectionBox"; 20 | import { useFileHandlers } from "../hooks/useFileHandlers"; 21 | import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts"; 22 | 23 | export const FileUpload: React.FC = () => { 24 | const [selectedFileIds, setSelectedFileIds] = React.useState< 25 | Set> 26 | >(new Set()); 27 | const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false); 28 | const containerRef = React.useRef(null); 29 | 30 | const files = useQuery(api.files.list) ?? []; 31 | const updateFilePositions = useOptimisticUpdateFilePositions(); 32 | const removeFile = useOptimisticRemoveFile(); 33 | 34 | const hasFiles = files.length > 0; 35 | const unselectedFiles = files.filter( 36 | (file) => !selectedFileIds.has(file._id), 37 | ); 38 | const selectedFiles = files.filter((file) => selectedFileIds.has(file._id)); 39 | 40 | const { 41 | fileInputRef, 42 | getRootProps, 43 | isDragActive, 44 | handleSelectFilesClick, 45 | handleFileInputChange, 46 | } = useFileHandlers(); 47 | 48 | const { isDragSelecting, selectionStart, selectionCurrent, handleMouseDown } = 49 | useSelectionBox({ 50 | files, 51 | onSelectionChange: setSelectedFileIds, 52 | }); 53 | 54 | useKeyboardShortcuts({ 55 | selectedIds: selectedFileIds, 56 | onDelete: () => setShowDeleteConfirm(true), 57 | onClearSelection: () => setSelectedFileIds(new Set()), 58 | }); 59 | 60 | const handleFileClick = (fileId: Id<"files">, e: React.MouseEvent) => { 61 | e.stopPropagation(); 62 | if (e.shiftKey) { 63 | const newSelection = new Set(selectedFileIds); 64 | if (newSelection.has(fileId)) newSelection.delete(fileId); 65 | else newSelection.add(fileId); 66 | setSelectedFileIds(newSelection); 67 | } else setSelectedFileIds(new Set([fileId])); 68 | }; 69 | 70 | const handleConfirmDelete = () => { 71 | removeFile({ ids: Array.from(selectedFileIds) }); 72 | setSelectedFileIds(new Set()); 73 | setShowDeleteConfirm(false); 74 | }; 75 | 76 | const handleDashboardClick = () => 77 | window.open(import.meta.env.VITE_CONVEX_DASHBOARD_URL, "_blank"); 78 | 79 | React.useEffect(() => { 80 | // Prevent page scrolling when dragging files 81 | const preventScroll = (e: TouchEvent) => { 82 | if (e.target instanceof Element && e.target.closest(".file-icon")) 83 | e.preventDefault(); 84 | }; 85 | 86 | document.addEventListener("touchmove", preventScroll, { passive: false }); 87 | return () => document.removeEventListener("touchmove", preventScroll); 88 | }, []); 89 | 90 | return ( 91 | <> 92 |
102 | 103 | 104 | void handleFileInputChange(e)} 110 | /> 111 | 112 | {unselectedFiles.map((file) => ( 113 | handleFileClick(file._id, e)} 117 | isDragSelecting={isDragSelecting} 118 | /> 119 | ))} 120 | 121 | {selectedFiles.map((file) => ( 122 | void updateFilePositions({ updates })} 127 | onDelete={() => setSelectedFileIds(new Set())} 128 | onClick={(e) => handleFileClick(file._id, e)} 129 | disableTooltip={selectedFiles.length > 1 || isDragSelecting} 130 | /> 131 | ))} 132 | 133 | {selectedFiles.length > 1 && ( 134 | 135 | )} 136 | 137 | 138 | 139 | {!hasFiles && } 140 | 141 | {isDragActive && } 142 | 143 | {isDragSelecting && ( 144 | 145 | )} 146 | 147 | 153 |
154 | 155 | 156 | ); 157 | }; 158 | -------------------------------------------------------------------------------- /convex/_generated/server.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | /** 3 | * Generated utilities for implementing server-side Convex query and mutation functions. 4 | * 5 | * THIS CODE IS AUTOMATICALLY GENERATED. 6 | * 7 | * To regenerate, run `npx convex dev`. 8 | * @module 9 | */ 10 | 11 | import { 12 | ActionBuilder, 13 | HttpActionBuilder, 14 | MutationBuilder, 15 | QueryBuilder, 16 | GenericActionCtx, 17 | GenericMutationCtx, 18 | GenericQueryCtx, 19 | GenericDatabaseReader, 20 | GenericDatabaseWriter, 21 | } from "convex/server"; 22 | import type { DataModel } from "./dataModel.js"; 23 | 24 | /** 25 | * Define a query in this Convex app's public API. 26 | * 27 | * This function will be allowed to read your Convex database and will be accessible from the client. 28 | * 29 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 30 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 31 | */ 32 | export declare const query: QueryBuilder; 33 | 34 | /** 35 | * Define a query that is only accessible from other Convex functions (but not from the client). 36 | * 37 | * This function will be allowed to read from your Convex database. It will not be accessible from the client. 38 | * 39 | * @param func - The query function. It receives a {@link QueryCtx} as its first argument. 40 | * @returns The wrapped query. Include this as an `export` to name it and make it accessible. 41 | */ 42 | export declare const internalQuery: QueryBuilder; 43 | 44 | /** 45 | * Define a mutation in this Convex app's public API. 46 | * 47 | * This function will be allowed to modify your Convex database and will be accessible from the client. 48 | * 49 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 50 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 51 | */ 52 | export declare const mutation: MutationBuilder; 53 | 54 | /** 55 | * Define a mutation that is only accessible from other Convex functions (but not from the client). 56 | * 57 | * This function will be allowed to modify your Convex database. It will not be accessible from the client. 58 | * 59 | * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument. 60 | * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible. 61 | */ 62 | export declare const internalMutation: MutationBuilder; 63 | 64 | /** 65 | * Define an action in this Convex app's public API. 66 | * 67 | * An action is a function which can execute any JavaScript code, including non-deterministic 68 | * code and code with side-effects, like calling third-party services. 69 | * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive. 70 | * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}. 71 | * 72 | * @param func - The action. It receives an {@link ActionCtx} as its first argument. 73 | * @returns The wrapped action. Include this as an `export` to name it and make it accessible. 74 | */ 75 | export declare const action: ActionBuilder; 76 | 77 | /** 78 | * Define an action that is only accessible from other Convex functions (but not from the client). 79 | * 80 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 81 | * @returns The wrapped function. Include this as an `export` to name it and make it accessible. 82 | */ 83 | export declare const internalAction: ActionBuilder; 84 | 85 | /** 86 | * Define an HTTP action. 87 | * 88 | * This function will be used to respond to HTTP requests received by a Convex 89 | * deployment if the requests matches the path and method where this action 90 | * is routed. Be sure to route your action in `convex/http.js`. 91 | * 92 | * @param func - The function. It receives an {@link ActionCtx} as its first argument. 93 | * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up. 94 | */ 95 | export declare const httpAction: HttpActionBuilder; 96 | 97 | /** 98 | * A set of services for use within Convex query functions. 99 | * 100 | * The query context is passed as the first argument to any Convex query 101 | * function run on the server. 102 | * 103 | * This differs from the {@link MutationCtx} because all of the services are 104 | * read-only. 105 | */ 106 | export type QueryCtx = GenericQueryCtx; 107 | 108 | /** 109 | * A set of services for use within Convex mutation functions. 110 | * 111 | * The mutation context is passed as the first argument to any Convex mutation 112 | * function run on the server. 113 | */ 114 | export type MutationCtx = GenericMutationCtx; 115 | 116 | /** 117 | * A set of services for use within Convex action functions. 118 | * 119 | * The action context is passed as the first argument to any Convex action 120 | * function run on the server. 121 | */ 122 | export type ActionCtx = GenericActionCtx; 123 | 124 | /** 125 | * An interface to read from the database within Convex query functions. 126 | * 127 | * The two entry points are {@link DatabaseReader.get}, which fetches a single 128 | * document by its {@link Id}, or {@link DatabaseReader.query}, which starts 129 | * building a query. 130 | */ 131 | export type DatabaseReader = GenericDatabaseReader; 132 | 133 | /** 134 | * An interface to read from and write to the database within Convex mutation 135 | * functions. 136 | * 137 | * Convex guarantees that all writes within a single mutation are 138 | * executed atomically, so you never have to worry about partial writes leaving 139 | * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control) 140 | * for the guarantees Convex provides your functions. 141 | / 142 | export type DatabaseWriter = GenericDatabaseWriter; 143 | -------------------------------------------------------------------------------- /src/components/FileTooltip.tsx: -------------------------------------------------------------------------------- 1 | import as React from "react"; 2 | import { Button } from "./ui/button"; 3 | import { Trash2, Upload, Check, Clock, Download, XCircle } from "lucide-react"; 4 | import { Doc, Id } from "../../convex/_generated/dataModel"; 5 | import { useOptimisticRemoveFile } from "../hooks/useOptimisticFiles"; 6 | import { DeleteFileDialog } from "./DeleteFileDialog"; 7 | import { formatFileSize } from "../utils/formatters"; 8 | 9 | type FilePreviewProps = { 10 | type: string; 11 | url?: string; 12 | }; 13 | 14 | const FilePreview: React.FC = ({ type, url }) => { 15 | if (!url) return null; 16 | 17 | // Image files 18 | if (type.startsWith("image/") || /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(type)) 19 | return ( 20 |
21 | 26 |
27 | ); 28 | 29 | // Video files 30 | if (type.startsWith("video/") || /\.(mp4|mov|avi|wmv|flv|webm)$/i.test(type)) 31 | return ( 32 |
33 |
35 | ); 36 | 37 | // Audio files 38 | if (type.startsWith("audio/") || /\.(mp3|wav|ogg|m4a)$/i.test(type)) 39 | return ( 40 |
41 |
43 | ); 44 | 45 | // PDF files - show iframe preview 46 | if (type === "application/pdf" || type.endsWith(".pdf")) 47 | return ( 48 |
49 | 50 | </div> 51 | ); 52 | 53 | // Text/Code files - could add a code preview here but might be better as a separate feature 54 | return null; 55 | }; 56 | 57 | type FileTooltipProps = { 58 | fileId: Id<"files">; 59 | name: string; 60 | size: number; 61 | type: string; 62 | onDelete?: () => void; 63 | uploadState: Doc<"files">["uploadState"]; 64 | }; 65 | 66 | export const FileTooltip: React.FC<FileTooltipProps> = ({ 67 | fileId, 68 | name, 69 | size, 70 | type, 71 | onDelete, 72 | uploadState, 73 | }) => { 74 | const removeFile = useOptimisticRemoveFile(); 75 | const [showDeleteDialog, setShowDeleteDialog] = React.useState(false); 76 | 77 | const handleDelete = () => { 78 | void removeFile({ ids: [fileId] }); 79 | setShowDeleteDialog(false); 80 | onDelete?.(); 81 | }; 82 | 83 | const handleDownload = () => { 84 | if (uploadState.kind === "uploaded") { 85 | window.open(uploadState.url, "_blank"); 86 | } 87 | }; 88 | 89 | const getUploadStateDisplay = () => { 90 | switch (uploadState.kind) { 91 | case "created": 92 | return ( 93 | <div className="flex items-center gap-1 text-gray-500"> 94 | <Clock className="w-3 h-3" /> 95 | Waiting 96 | </div> 97 | ); 98 | case "uploading": 99 | return ( 100 | <div className="flex items-center gap-1 text-blue-500"> 101 | <Upload className="w-3 h-3" /> 102 | {uploadState.progress}% 103 | </div> 104 | ); 105 | case "errored": 106 | return ( 107 | <div className="flex items-center gap-1 text-red-500"> 108 | <XCircle className="w-3 h-3" /> 109 | Error: {uploadState.message} 110 | </div> 111 | ); 112 | case "uploaded": 113 | return ( 114 | <div className="flex items-center gap-1 text-green-500"> 115 | <Check className="w-3 h-3" /> 116 | Uploaded 117 | </div> 118 | ); 119 | } 120 | }; 121 | 122 | return ( 123 | <> 124 | <div className="absolute left-1/2 -translate-x-1/2 -top-1 -translate-y-full pointer-events-auto flex flex-col items-center animate-popIn"> 125 | <div className="bg-white rounded-lg shadow-lg p-3 border text-sm w-[280px]"> 126 | <div className="flex flex-col"> 127 | {uploadState.kind === "uploaded" && ( 128 | <FilePreview type={type} url={uploadState.url} /> 129 | )} 130 | <div className="grid grid-cols-2 gap-4 relative"> 131 | <div> 132 | <div className="text-xs font-medium text-gray-500 mb-1"> 133 | PROPERTIES 134 | </div> 135 | <div className="text-gray-600"> 136 | Size: {formatFileSize(size)} 137 | </div> 138 | <div className="text-gray-600">Type: {type || "Unknown"}</div> 139 | </div> 140 | <div className="absolute top-0 bottom-0 left-1/2 border-l border-dotted border-gray-200" /> 141 | <div> 142 | <div className="text-xs font-medium text-gray-500 mb-1"> 143 | STATE 144 | </div> 145 | <div className="text-gray-600">{getUploadStateDisplay()}</div> 146 | </div> 147 | </div> 148 | <div className="bg-gray-200 -mx-3 my-2" /> 149 | <div className="-mx-3 -mb-3 p-2 bg-gray-50 rounded-b-lg flex gap-2"> 150 | <Button 151 | variant="ghost" 152 | size="sm" 153 | className="flex-1 text-blue-600 hover:text-blue-700 hover:bg-blue-50 disabled:opacity-50" 154 | onClick={handleDownload} 155 | disabled={uploadState.kind !== "uploaded"} 156 | > 157 | <Download className="w-4 h-4 mr-2" /> 158 | </Button> 159 | <Button 160 | variant="ghost" 161 | size="sm" 162 | className="flex-1 text-red-600 hover:text-red-700 hover:bg-red-50" 163 | onClick={(e) => { 164 | e.stopPropagation(); 165 | setShowDeleteDialog(true); 166 | }} 167 | > 168 | <Trash2 className="w-4 h-4 mr-2" /> 169 | </Button> 170 | </div> 171 | </div> 172 | </div> 173 | {/* Triangle pointer /} 174 | <div 175 | className="w-0 h-0" 176 | style={{ 177 | borderLeft: "8px solid transparent", 178 | borderRight: "8px solid transparent", 179 | borderTop: "8px solid white", 180 | }} 181 | /> 182 | </div> 183 | 184 | <DeleteFileDialog 185 | fileCount={1} 186 | open={showDeleteDialog} 187 | onOpenChange={setShowDeleteDialog} 188 | onConfirm={handleDelete} 189 | /> 190 | </> 191 | ); 192 | }; 193 | -------------------------------------------------------------------------------- /convex/files.ts: -------------------------------------------------------------------------------- 1 | import { mutation, query, internalMutation } from "./_generated/server"; 2 | import { v } from "convex/values"; 3 | import { ConvexError } from "convex/values"; 4 | import { Doc, Id } from "./_generated/dataModel"; 5 | import { internal } from "./_generated/api"; 6 | import { MAX_FILE_SIZE, UPLOAD_TIMEOUT_MS } from "./constants"; 7 | 8 | export const list = query({ 9 | args: {}, 10 | handler: async (ctx) => { 11 | return await ctx.db.query("files").collect(); 12 | }, 13 | }); 14 | 15 | export const generateUploadUrl = mutation({ 16 | args: {}, 17 | handler: async (ctx) => { 18 | return await ctx.storage.generateUploadUrl(); 19 | }, 20 | }); 21 | 22 | export const create = mutation({ 23 | args: { 24 | files: v.array( 25 | v.object({ 26 | name: v.string(), 27 | size: v.number(), 28 | type: v.string(), 29 | position: v.object({ 30 | x: v.number(), 31 | y: v.number(), 32 | }), 33 | }), 34 | ), 35 | }, 36 | handler: async (ctx, { files }) => { 37 | const fileIds = []; 38 | for (const file of files) { 39 | if (file.size > MAX_FILE_SIZE) 40 | throw new ConvexError( 41 | `File ${file.name} exceeds maximum size of ${MAX_FILE_SIZE / 1024 / 1024}MB`, 42 | ); 43 | 44 | const id = await ctx.db.insert("files", { 45 | ...file, 46 | uploadState: { 47 | kind: "created", 48 | }, 49 | }); 50 | fileIds.push(id); 51 | } 52 | return fileIds; 53 | }, 54 | }); 55 | 56 | export const updatePosition = mutation({ 57 | args: { 58 | id: v.id("files"), 59 | position: v.object({ 60 | x: v.number(), 61 | y: v.number(), 62 | }), 63 | }, 64 | handler: async (ctx, { id, position }) => { 65 | return await ctx.db.patch(id, { position }); 66 | }, 67 | }); 68 | 69 | export const remove = mutation({ 70 | args: { ids: v.array(v.id("files")) }, 71 | handler: async (ctx, { ids }) => { 72 | for (const id of ids) { 73 | const file = await ctx.db.get(id); 74 | if (!file) throw new ConvexError(`File ${id} not found`); 75 | 76 | // Cancel timeout if file is uploading 77 | if (file.uploadState.kind === "uploading") 78 | await ctx.scheduler.cancel(file.uploadState.timeoutJobId); 79 | 80 | // Delete from storage if file is uploaded 81 | if (file.uploadState.kind === "uploaded") 82 | await ctx.storage.delete(file.uploadState.storageId); 83 | 84 | await ctx.db.delete(id); 85 | } 86 | }, 87 | }); 88 | 89 | export const startUpload = mutation({ 90 | args: { 91 | id: v.id("files"), 92 | }, 93 | handler: async (ctx, { id }): Promise<Doc<"files">> => { 94 | const file = await ctx.db.get(id); 95 | if (!file) throw new ConvexError("File not found"); 96 | 97 | // Schedule initial timeout 98 | const timeoutJobId = await ctx.scheduler.runAfter( 99 | UPLOAD_TIMEOUT_MS, 100 | internal.files.handleUploadTimeout, 101 | { 102 | fileId: id, 103 | }, 104 | ); 105 | 106 | await ctx.db.patch(id, { 107 | uploadState: { 108 | kind: "uploading" as const, 109 | progress: 0, 110 | lastProgressAt: Date.now(), 111 | timeoutJobId, 112 | }, 113 | }); 114 | 115 | const updated = await ctx.db.get(id); 116 | if (!updated) throw new ConvexError("Failed to update file"); 117 | return updated; 118 | }, 119 | }); 120 | 121 | export const updateUploadProgress = mutation({ 122 | args: { 123 | id: v.id("files"), 124 | progress: v.number(), 125 | }, 126 | handler: async (ctx, { id, progress }): Promise<Doc<"files">> => { 127 | const file = await ctx.db.get(id); 128 | if (!file) throw new ConvexError("File not found"); 129 | if (file.uploadState.kind !== "uploading") 130 | throw new ConvexError("File is not in uploading state"); 131 | 132 | // Cancel existing timeout 133 | await ctx.scheduler.cancel(file.uploadState.timeoutJobId); 134 | 135 | // Schedule new timeout 136 | const timeoutJobId = await ctx.scheduler.runAfter( 137 | UPLOAD_TIMEOUT_MS, 138 | internal.files.handleUploadTimeout, 139 | { 140 | fileId: id, 141 | }, 142 | ); 143 | 144 | await ctx.db.patch(id, { 145 | uploadState: { 146 | kind: "uploading" as const, 147 | progress, 148 | lastProgressAt: Date.now(), 149 | timeoutJobId, 150 | }, 151 | }); 152 | 153 | const updated = await ctx.db.get(id); 154 | if (!updated) throw new ConvexError("Failed to update file"); 155 | return updated; 156 | }, 157 | }); 158 | 159 | export const completeUpload = mutation({ 160 | args: { 161 | id: v.id("files"), 162 | storageId: v.id("_storage"), 163 | }, 164 | handler: async (ctx, { id, storageId }) => { 165 | const file = await ctx.db.get(id); 166 | if (!file) throw new ConvexError("File not found"); 167 | if (file.uploadState.kind !== "uploading") 168 | throw new ConvexError("File is not in uploading state"); 169 | 170 | // Cancel timeout since upload is complete 171 | await ctx.scheduler.cancel(file.uploadState.timeoutJobId); 172 | 173 | const url = await ctx.storage.getUrl(storageId); 174 | if (!url) throw new ConvexError("Failed to get download URL"); 175 | 176 | return await ctx.db.patch(id, { 177 | uploadState: { 178 | kind: "uploaded", 179 | storageId, 180 | url, 181 | }, 182 | }); 183 | }, 184 | }); 185 | 186 | export const getDownloadUrl = query({ 187 | args: { ids: v.array(v.id("files")) }, 188 | handler: async (ctx, { ids }) => { 189 | const urls = []; 190 | for (const id of ids) { 191 | const file = await ctx.db.get(id); 192 | if (!file) throw new ConvexError("File not found"); 193 | if (file.uploadState.kind !== "uploaded") { 194 | urls.push(null); 195 | continue; 196 | } 197 | const url = await ctx.storage.getUrl(file.uploadState.storageId); 198 | urls.push(url); 199 | } 200 | return urls; 201 | }, 202 | }); 203 | 204 | export const updatePositions = mutation({ 205 | args: { 206 | updates: v.array( 207 | v.object({ 208 | id: v.id("files"), 209 | position: v.object({ 210 | x: v.number(), 211 | y: v.number(), 212 | }), 213 | }), 214 | ), 215 | }, 216 | handler: async (ctx, { updates }) => { 217 | await Promise.all( 218 | updates.map(({ id, position }) => ctx.db.patch(id, { position })), 219 | ); 220 | }, 221 | }); 222 | 223 | export const setErrorState = mutation({ 224 | args: { 225 | id: v.id("files"), 226 | message: v.string(), 227 | }, 228 | handler: async (ctx, { id, message }) => { 229 | const file = await ctx.db.get(id); 230 | if (!file) throw new ConvexError("File not found"); 231 | 232 | // Cancel timeout if file was uploading 233 | if (file.uploadState.kind === "uploading") { 234 | await ctx.scheduler.cancel(file.uploadState.timeoutJobId); 235 | } 236 | 237 | return await ctx.db.patch(id, { 238 | uploadState: { 239 | kind: "errored", 240 | message, 241 | }, 242 | }); 243 | }, 244 | }); 245 | 246 | // Internal mutation to handle upload timeouts 247 | export const handleUploadTimeout = internalMutation({ 248 | args: { 249 | fileId: v.id("files"), 250 | }, 251 | handler: async (ctx, { fileId }) => { 252 | const file = await ctx.db.get(fileId); 253 | if (!file) return; // File was deleted 254 | if (file.uploadState.kind !== "uploading") return; // File is no longer uploading 255 | 256 | // Mark the file as errored 257 | await ctx.db.patch(fileId, { 258 | uploadState: { 259 | kind: "errored", 260 | message: `Upload timed out - no progress for ${UPLOAD_TIMEOUT_MS / 1000} seconds`, 261 | }, 262 | }); 263 | }, 264 | }); 265 | -------------------------------------------------------------------------------- /src/components/ui/dropdown-menu.tsx: -------------------------------------------------------------------------------- 1 | import as React from "react"; 2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; 3 | import { 4 | CheckIcon, 5 | ChevronRightIcon, 6 | DotFilledIcon, 7 | } from "@radix-ui/react-icons"; 8 | 9 | import { cn } from "@/lib/utils"; 10 | 11 | const DropdownMenu = DropdownMenuPrimitive.Root; 12 | 13 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; 14 | 15 | const DropdownMenuGroup = DropdownMenuPrimitive.Group; 16 | 17 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal; 18 | 19 | const DropdownMenuSub = DropdownMenuPrimitive.Sub; 20 | 21 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; 22 | 23 | const DropdownMenuSubTrigger = React.forwardRef< 24 | React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, 25 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { 26 | inset?: boolean; 27 | } 28 | >(({ className, inset, children, ...props }, ref) => ( 29 | <DropdownMenuPrimitive.SubTrigger 30 | ref={ref} 31 | className={cn( 32 | "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent", 33 | inset && "pl-8", 34 | className, 35 | )} 36 | {...props} 37 | > 38 | {children} 39 | <ChevronRightIcon className="ml-auto h-4 w-4" /> 40 | </DropdownMenuPrimitive.SubTrigger> 41 | )); 42 | DropdownMenuSubTrigger.displayName = 43 | DropdownMenuPrimitive.SubTrigger.displayName; 44 | 45 | const DropdownMenuSubContent = React.forwardRef< 46 | React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, 47 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> 48 | >(({ className, ...props }, ref) => ( 49 | <DropdownMenuPrimitive.SubContent 50 | ref={ref} 51 | className={cn( 52 | "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", 53 | className, 54 | )} 55 | {...props} 56 | /> 57 | )); 58 | DropdownMenuSubContent.displayName = 59 | DropdownMenuPrimitive.SubContent.displayName; 60 | 61 | const DropdownMenuContent = React.forwardRef< 62 | React.ElementRef<typeof DropdownMenuPrimitive.Content>, 63 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> 64 | >(({ className, sideOffset = 4, ...props }, ref) => ( 65 | <DropdownMenuPrimitive.Portal> 66 | <DropdownMenuPrimitive.Content 67 | ref={ref} 68 | sideOffset={sideOffset} 69 | className={cn( 70 | "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", 71 | "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", 72 | className, 73 | )} 74 | {...props} 75 | /> 76 | </DropdownMenuPrimitive.Portal> 77 | )); 78 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; 79 | 80 | const DropdownMenuItem = React.forwardRef< 81 | React.ElementRef<typeof DropdownMenuPrimitive.Item>, 82 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { 83 | inset?: boolean; 84 | } 85 | >(({ className, inset, ...props }, ref) => ( 86 | <DropdownMenuPrimitive.Item 87 | ref={ref} 88 | className={cn( 89 | "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 90 | inset && "pl-8", 91 | className, 92 | )} 93 | {...props} 94 | /> 95 | )); 96 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; 97 | 98 | const DropdownMenuCheckboxItem = React.forwardRef< 99 | React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, 100 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> 101 | >(({ className, children, checked, ...props }, ref) => ( 102 | <DropdownMenuPrimitive.CheckboxItem 103 | ref={ref} 104 | className={cn( 105 | "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 106 | className, 107 | )} 108 | checked={checked} 109 | {...props} 110 | > 111 | <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> 112 | <DropdownMenuPrimitive.ItemIndicator> 113 | <CheckIcon className="h-4 w-4" /> 114 | </DropdownMenuPrimitive.ItemIndicator> 115 | </span> 116 | {children} 117 | </DropdownMenuPrimitive.CheckboxItem> 118 | )); 119 | DropdownMenuCheckboxItem.displayName = 120 | DropdownMenuPrimitive.CheckboxItem.displayName; 121 | 122 | const DropdownMenuRadioItem = React.forwardRef< 123 | React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, 124 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> 125 | >(({ className, children, ...props }, ref) => ( 126 | <DropdownMenuPrimitive.RadioItem 127 | ref={ref} 128 | className={cn( 129 | "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 130 | className, 131 | )} 132 | {...props} 133 | > 134 | <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> 135 | <DropdownMenuPrimitive.ItemIndicator> 136 | <DotFilledIcon className="h-4 w-4 fill-current" /> 137 | </DropdownMenuPrimitive.ItemIndicator> 138 | </span> 139 | {children} 140 | </DropdownMenuPrimitive.RadioItem> 141 | )); 142 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; 143 | 144 | const DropdownMenuLabel = React.forwardRef< 145 | React.ElementRef<typeof DropdownMenuPrimitive.Label>, 146 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { 147 | inset?: boolean; 148 | } 149 | >(({ className, inset, ...props }, ref) => ( 150 | <DropdownMenuPrimitive.Label 151 | ref={ref} 152 | className={cn( 153 | "px-2 py-1.5 text-sm font-semibold", 154 | inset && "pl-8", 155 | className, 156 | )} 157 | {...props} 158 | /> 159 | )); 160 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; 161 | 162 | const DropdownMenuSeparator = React.forwardRef< 163 | React.ElementRef<typeof DropdownMenuPrimitive.Separator>, 164 | React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> 165 | >(({ className, ...props }, ref) => ( 166 | <DropdownMenuPrimitive.Separator 167 | ref={ref} 168 | className={cn("-mx-1 my-1 h-px bg-muted", className)} 169 | {...props} 170 | /> 171 | )); 172 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; 173 | 174 | const DropdownMenuShortcut = ({ 175 | className, 176 | ...props 177 | }: React.HTMLAttributes<HTMLSpanElement>) => { 178 | return ( 179 | <span 180 | className={cn("ml-auto text-xs tracking-widest opacity-60", className)} 181 | {...props} 182 | /> 183 | ); 184 | }; 185 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; 186 | 187 | export { 188 | DropdownMenu, 189 | DropdownMenuTrigger, 190 | DropdownMenuContent, 191 | DropdownMenuItem, 192 | DropdownMenuCheckboxItem, 193 | DropdownMenuRadioItem, 194 | DropdownMenuLabel, 195 | DropdownMenuSeparator, 196 | DropdownMenuShortcut, 197 | DropdownMenuGroup, 198 | DropdownMenuPortal, 199 | DropdownMenuSub, 200 | DropdownMenuSubContent, 201 | DropdownMenuSubTrigger, 202 | DropdownMenuRadioGroup, 203 | }; 204 | -------------------------------------------------------------------------------- /.cursor/rules/convex_rules.mdc: -------------------------------------------------------------------------------- 1 | --- 2 | description: Guidelines and best practices for building Convex projects, including database schema design, queries, mutations, and real-world examples 3 | globs: **/.{ts,tsx,js,jsx} 4 | alwaysApply: false 5 | --- 6 | 7 | # Convex guidelines 8 | ## Function guidelines 9 | ### New function syntax 10 | - ALWAYS use the new function syntax for Convex functions. For example: 11 | ```typescript 12 | import { query } from "./_generated/server"; 13 | import { v } from "convex/values"; 14 | export const f = query({ 15 | args: {}, 16 | returns: v.null(), 17 | handler: async (ctx, args) => { 18 | // Function body 19 | }, 20 | }); 21 | ``` 22 | 23 | ### Http endpoint syntax 24 | - HTTP endpoints are defined in `convex/http.ts` and require an `httpAction` decorator. For example: 25 | ```typescript 26 | import { httpRouter } from "convex/server"; 27 | import { httpAction } from "./_generated/server"; 28 | const http = httpRouter(); 29 | http.route({ 30 | path: "/echo", 31 | method: "POST", 32 | handler: httpAction(async (ctx, req) => { 33 | const body = await req.bytes(); 34 | return new Response(body, { status: 200 }); 35 | }), 36 | }); 37 | ``` 38 | - HTTP endpoints are always registered at the exact path you specify in the `path` field. For example, if you specify `/api/someRoute`, the endpoint will be registered at `/api/someRoute`. 39 | 40 | ### Validators 41 | - Below is an example of an array validator: 42 | ```typescript 43 | import { mutation } from "./_generated/server"; 44 | import { v } from "convex/values"; 45 | 46 | export default mutation({ 47 | args: { 48 | simpleArray: v.array(v.union(v.string(), v.number())), 49 | }, 50 | handler: async (ctx, args) => { 51 | //... 52 | }, 53 | }); 54 | ``` 55 | - Below is an example of a schema with validators that codify a discriminated union type: 56 | ```typescript 57 | import { defineSchema, defineTable } from "convex/server"; 58 | import { v } from "convex/values"; 59 | 60 | export default defineSchema({ 61 | results: defineTable( 62 | v.union( 63 | v.object({ 64 | kind: v.literal("error"), 65 | errorMessage: v.string(), 66 | }), 67 | v.object({ 68 | kind: v.literal("success"), 69 | value: v.number(), 70 | }), 71 | ), 72 | ) 73 | }); 74 | ``` 75 | - Always use the `v.null()` validator when returning a null value. Below is an example query that returns a null value: 76 | ```typescript 77 | import { query } from "./_generated/server"; 78 | import { v } from "convex/values"; 79 | 80 | export const exampleQuery = query({ 81 | args: {}, 82 | returns: v.null(), 83 | handler: async (ctx, args) => { 84 | console.log("This query returns a null value"); 85 | return null; 86 | }, 87 | }); 88 | ``` 89 | - Here are the valid Convex types along with their respective validators: 90 | Convex Type | TS/JS type | Example Usage | Validator for argument validation and schemas | Notes | 91 | | ----------- | ------------| -----------------------| -----------------------------------------------| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| 92 | | Id | string | `doc._id` | `v.id(tableName)` | | 93 | | Null | null | `null` | `v.null()` | JavaScript's `undefined` is not a valid Convex value. Functions the return `undefined` or do not return will return `null` when called from a client. Use `null` instead. | 94 | | Int64 | bigint | `3n` | `v.int64()` | Int64s only support BigInts between -2^63 and 2^63-1. Convex supports `bigint`s in most modern browsers. | 95 | | Float64 | number | `3.1` | `v.number()` | Convex supports all IEEE-754 double-precision floating point numbers (such as NaNs). Inf and NaN are JSON serialized as strings. | 96 | | Boolean | boolean | `true` | `v.boolean()` | 97 | | String | string | `"abc"` | `v.string()` | Strings are stored as UTF-8 and must be valid Unicode sequences. Strings must be smaller than the 1MB total size limit when encoded as UTF-8. | 98 | | Bytes | ArrayBuffer | `new ArrayBuffer(8)` | `v.bytes()` | Convex supports first class bytestrings, passed in as `ArrayBuffer`s. Bytestrings must be smaller than the 1MB total size limit for Convex types. | 99 | | Array | Array] | `[1, 3.2, "abc"]` | `v.array(values)` | Arrays can have at most 8192 values. | 100 | | Object | Object | `{a: "abc"}` | `v.object({property: value})` | Convex only supports "plain old JavaScript objects" (objects that do not have a custom prototype). Objects can have at most 1024 entries. Field names must be nonempty and not start with "$" or "_". | 101 | | Record | Record | `{"a": "1", "b": "2"}` | `v.record(keys, values)` | Records are objects at runtime, but can have dynamic keys. Keys must be only ASCII characters, nonempty, and not start with "$" or "_". | 102 | 103 | ### Function registration 104 | - Use `internalQuery`, `internalMutation`, and `internalAction` to register internal functions. These functions are private and aren't part of an app's API. They can only be called by other Convex functions. These functions are always imported from `./_generated/server`. 105 | - Use `query`, `mutation`, and `action` to register public functions. These functions are part of the public API and are exposed to the public Internet. Do NOT use `query`, `mutation`, or `action` to register sensitive internal functions that should be kept private. 106 | - You CANNOT register a function through the `api` or `internal` objects. 107 | - ALWAYS include argument and return validators for all Convex functions. This includes all of `query`, `internalQuery`, `mutation`, `internalMutation`, `action`, and `internalAction`. If a function doesn't return anything, include `returns: v.null()` as its output validator. 108 | - If the JavaScript implementation of a Convex function doesn't have a return value, it implicitly returns `null`. 109 | 110 | ### Function calling 111 | - Use `ctx.runQuery` to call a query from a query, mutation, or action. 112 | - Use `ctx.runMutation` to call a mutation from a mutation or action. 113 | - Use `ctx.runAction` to call an action from an action. 114 | - ONLY call an action from another action if you need to cross runtimes (e.g. from V8 to Node). Otherwise, pull out the shared code into a helper async function and call that directly instead. 115 | - Try to use as few calls from actions to queries and mutations as possible. Queries and mutations are transactions, so splitting logic up into multiple calls introduces the risk of race conditions. 116 | - All of these calls take in a `FunctionReference`. Do NOT try to pass the callee function directly into one of these calls. 117 | - When using `ctx.runQuery`, `ctx.runMutation`, or `ctx.runAction` to call a function in the same file, specify a type annotation on the return value to work around TypeScript circularity limitations. For example, 118 | ``` 119 | export const f = query({ 120 | args: { name: v.string() }, 121 | returns: v.string(), 122 | handler: async (ctx, args) => { 123 | return "Hello " + args.name; 124 | }, 125 | }); 126 | 127 | export const g = query({ 128 | args: {}, 129 | returns: v.null(), 130 | handler: async (ctx, args) => { 131 | const result: string = await ctx.runQuery(api.example.f, { name: "Bob" }); 132 | return null; 133 | }, 134 | }); 135 | ``` 136 | 137 | ### Function references 138 | - Function references are pointers to registered Convex functions. 139 | - Use the `api` object defined by the framework in `convex/_generated/api.ts` to call public functions registered with `query`, `mutation`, or `action`. 140 | - Use the `internal` object defined by the framework in `convex/_generated/api.ts` to call internal (or private) functions registered with `internalQuery`, `internalMutation`, or `internalAction`. 141 | - Convex uses file-based routing, so a public function defined in `convex/example.ts` named `f` has a function reference of `api.example.f`. 142 | - A private function defined in `convex/example.ts` named `g` has a function reference of `internal.example.g`. 143 | - Functions can also registered within directories nested within the `convex/` folder. For example, a public function `h` defined in `convex/messages/access.ts` has a function reference of `api.messages.access.h`. 144 | 145 | ### Api design 146 | - Convex uses file-based routing, so thoughtfully organize files with public query, mutation, or action functions within the `convex/` directory. 147 | - Use `query`, `mutation`, and `action` to define public functions. 148 | - Use `internalQuery`, `internalMutation`, and `internalAction` to define private, internal functions. 149 | 150 | ### Pagination 151 | - Paginated queries are queries that return a list of results in incremental pages. 152 | - You can define pagination using the following syntax: 153 | 154 | ```ts 155 | import { v } from "convex/values"; 156 | import { query, mutation } from "./_generated/server"; 157 | import { paginationOptsValidator } from "convex/server"; 158 | export const listWithExtraArg = query({ 159 | args: { paginationOpts: paginationOptsValidator, author: v.string() }, 160 | handler: async (ctx, args) => { 161 | return await ctx.db 162 | .query("messages") 163 | .filter((q) => q.eq(q.field("author"), args.author)) 164 | .order("desc") 165 | .paginate(args.paginationOpts); 166 | }, 167 | }); 168 | ``` 169 | Note: `paginationOpts` is an object with the following properties: 170 | - `numItems`: the maximum number of documents to return (the validator is `v.number()`) 171 | - `cursor`: the cursor to use to fetch the next page of documents (the validator is `v.union(v.string(), v.null())`) 172 | - A query that ends in `.paginate()` returns an object that has the following properties: 173 | - page (contains an array of documents that you fetches) 174 | - isDone (a boolean that represents whether or not this is the last page of documents) 175 | - continueCursor (a string that represents the cursor to use to fetch the next page of documents) 176 | 177 | 178 | ## Validator guidelines 179 | - `v.bigint()` is deprecated for representing signed 64-bit integers. Use `v.int64()` instead. 180 | - Use `v.record()` for defining a record type. `v.map()` and `v.set()` are not supported. 181 | 182 | ## Schema guidelines 183 | - Always define your schema in `convex/schema.ts`. 184 | - Always import the schema definition functions from `convex/server`: 185 | - System fields are automatically added to all documents and are prefixed with an underscore. The two system fields that are automatically added to all documents are `_creationTime` which has the validator `v.number()` and `_id` which has the validator `v.id(tableName)`. 186 | - Always include all index fields in the index name. For example, if an index is defined as `["field1", "field2"]`, the index name should be "by_field1_and_field2". 187 | - Index fields must be queried in the same order they are defined. If you want to be able to query by "field1" then "field2" and by "field2" then "field1", you must create separate indexes. 188 | 189 | ## Typescript guidelines 190 | - You can use the helper typescript type `Id` imported from './_generated/dataModel' to get the type of the id for a given table. For example if there is a table called 'users' you can use `Id<'users'>` to get the type of the id for that table. 191 | - If you need to define a `Record` make sure that you correctly provide the type of the key and value in the type. For example a validator `v.record(v.id('users'), v.string())` would have the type `Record<Id<'users'>, string>`. Below is an example of using `Record` with an `Id` type in a query: 192 | ```ts 193 | import { query } from "./_generated/server"; 194 | import { Doc, Id } from "./_generated/dataModel"; 195 | 196 | export const exampleQuery = query({ 197 | args: { userIds: v.array(v.id("users")) }, 198 | returns: v.record(v.id("users"), v.string()), 199 | handler: async (ctx, args) => { 200 | const idToUsername: Record<Id<"users">, string> = {}; 201 | for (const userId of args.userIds) { 202 | const user = await ctx.db.get(userId); 203 | if (user) { 204 | users[user._id] = user.username; 205 | } 206 | } 207 | 208 | return idToUsername; 209 | }, 210 | }); 211 | ``` 212 | - Be strict with types, particularly around id's of documents. For example, if a function takes in an id for a document in the 'users' table, take in `Id<'users'>` rather than `string`. 213 | - Always use `as const` for string literals in discriminated union types. 214 | - When using the `Array` type, make sure to always define your arrays as `const array: Array<T> = [...];` 215 | - When using the `Record` type, make sure to always define your records as `const record: Record<KeyType, ValueType> = {...};` 216 | - Always add `@types/node` to your `package.json` when using any Node.js built-in modules. 217 | 218 | ## Full text search guidelines 219 | - A query for "10 messages in channel '#general' that best match the query 'hello hi' in their body" would look like: 220 | 221 | const messages = await ctx.db 222 | .query("messages") 223 | .withSearchIndex("search_body", (q) => 224 | q.search("body", "hello hi").eq("channel", "#general"), 225 | ) 226 | .take(10); 227 | 228 | ## Query guidelines 229 | - Do NOT use `filter` in queries. Instead, define an index in the schema and use `withIndex` instead. 230 | - Convex queries do NOT support `.delete()`. Instead, `.collect()` the results, iterate over them, and call `ctx.db.delete(row._id)` on each result. 231 | - Use `.unique()` to get a single document from a query. This method will throw an error if there are multiple documents that match the query. 232 | - When using async iteration, don't use `.collect()` or `.take(n)` on the result of a query. Instead, use the `for await (const row of query)` syntax. 233 | ### Ordering 234 | - By default Convex always returns documents in ascending `_creationTime` order. 235 | - You can use `.order('asc')` or `.order('desc')` to pick whether a query is in ascending or descending order. If the order isn't specified, it defaults to ascending. 236 | - Document queries that use indexes will be ordered based on the columns in the index and can avoid slow table scans. 237 | 238 | 239 | ## Mutation guidelines 240 | - Use `ctx.db.replace` to fully replace an existing document. This method will throw an error if the document does not exist. 241 | - Use `ctx.db.patch` to shallow merge updates into an existing document. This method will throw an error if the document does not exist. 242 | 243 | ## Action guidelines 244 | - Always add `"use node";` to the top of files containing actions that use Node.js built-in modules. 245 | - Never use `ctx.db` inside of an action. Actions don't have access to the database. 246 | - Below is an example of the syntax for an action: 247 | ```ts 248 | import { action } from "./_generated/server"; 249 | 250 | export const exampleAction = action({ 251 | args: {}, 252 | returns: v.null(), 253 | handler: async (ctx, args) => { 254 | console.log("This action does not return anything"); 255 | return null; 256 | }, 257 | }); 258 | ``` 259 | 260 | ## Scheduling guidelines 261 | ### Cron guidelines 262 | - Only use the `crons.interval` or `crons.cron` methods to schedule cron jobs. Do NOT use the `crons.hourly`, `crons.daily`, or `crons.weekly` helpers. 263 | - Both cron methods take in a FunctionReference. Do NOT try to pass the function directly into one of these methods. 264 | - Define crons by declaring the top-level `crons` object, calling some methods on it, and then exporting it as default. For example, 265 | ```ts 266 | import { cronJobs } from "convex/server"; 267 | import { internal } from "./_generated/api"; 268 | import { internalAction } from "./_generated/server"; 269 | 270 | const empty = internalAction({ 271 | args: {}, 272 | returns: v.null(), 273 | handler: async (ctx, args) => { 274 | console.log("empty"); 275 | }, 276 | }); 277 | 278 | const crons = cronJobs(); 279 | 280 | // Run `internal.crons.empty` every two hours. 281 | crons.interval("delete inactive users", { hours: 2 }, internal.crons.empty, {}); 282 | 283 | export default crons; 284 | ``` 285 | - You can register Convex functions within `crons.ts` just like any other file. 286 | - If a cron calls an internal function, always import the `internal` object from '_generated/api`, even if the internal function is registered in the same file. 287 | 288 | 289 | ## File storage guidelines 290 | - Convex includes file storage for large files like images, videos, and PDFs. 291 | - The `ctx.storage.getUrl()` method returns a signed URL for a given file. It returns `null` if the file doesn't exist. 292 | - Do NOT use the deprecated `ctx.storage.getMetadata` call for loading a file's metadata. 293 | 294 | Instead, query the `_storage` system table. For example, you can use `ctx.db.system.get` to get an `Id<"_storage">`. 295 | ``` 296 | import { query } from "./_generated/server"; 297 | import { Id } from "./_generated/dataModel"; 298 | 299 | type FileMetadata = { 300 | _id: Id<"_storage">; 301 | _creationTime: number; 302 | contentType?: string; 303 | sha256: string; 304 | size: number; 305 | } 306 | 307 | export const exampleQuery = query({ 308 | args: { fileId: v.id("_storage") }, 309 | returns: v.null(); 310 | handler: async (ctx, args) => { 311 | const metadata: FileMetadata | null = await ctx.db.system.get(args.fileId); 312 | console.log(metadata); 313 | return null; 314 | }, 315 | }); 316 | ``` 317 | - Convex storage stores items as `Blob` objects. You must convert all items to/from a `Blob` when using Convex storage. 318 | 319 | 320 | # Examples: 321 | ## Example: chat-app 322 | 323 | ### Task 324 | ``` 325 | Create a real-time chat application backend with AI responses. The app should: 326 | - Allow creating users with names 327 | - Support multiple chat channels 328 | - Enable users to send messages to channels 329 | - Automatically generate AI responses to user messages 330 | - Show recent message history 331 | 332 | The backend should provide APIs for: 333 | 1. User management (creation) 334 | 2. Channel management (creation) 335 | 3. Message operations (sending, listing) 336 | 4. AI response generation using OpenAI's GPT-4 337 | 338 | Messages should be stored with their channel, author, and content. The system should maintain message order 339 | and limit history display to the 10 most recent messages per channel. 340 | 341 | ``` 342 | 343 | ### Analysis 344 | 1. Task Requirements Summary: 345 | - Build a real-time chat backend with AI integration 346 | - Support user creation 347 | - Enable channel-based conversations 348 | - Store and retrieve messages with proper ordering 349 | - Generate AI responses automatically 350 | 351 | 2. Main Components Needed: 352 | - Database tables: users, channels, messages 353 | - Public APIs for user/channel management 354 | - Message handling functions 355 | - Internal AI response generation system 356 | - Context loading for AI responses 357 | 358 | 3. Public API and Internal Functions Design: 359 | Public Mutations: 360 | - createUser: 361 | - file path: convex/index.ts 362 | - arguments: {name: v.string()} 363 | - returns: v.object({userId: v.id("users")}) 364 | - purpose: Create a new user with a given name 365 | - createChannel: 366 | - file path: convex/index.ts 367 | - arguments: {name: v.string()} 368 | - returns: v.object({channelId: v.id("channels")}) 369 | - purpose: Create a new channel with a given name 370 | - sendMessage: 371 | - file path: convex/index.ts 372 | - arguments: {channelId: v.id("channels"), authorId: v.id("users"), content: v.string()} 373 | - returns: v.null() 374 | - purpose: Send a message to a channel and schedule a response from the AI 375 | 376 | Public Queries: 377 | - listMessages: 378 | - file path: convex/index.ts 379 | - arguments: {channelId: v.id("channels")} 380 | - returns: v.array(v.object({ 381 | _id: v.id("messages"), 382 | _creationTime: v.number(), 383 | channelId: v.id("channels"), 384 | authorId: v.optional(v.id("users")), 385 | content: v.string(), 386 | })) 387 | - purpose: List the 10 most recent messages from a channel in descending creation order 388 | 389 | Internal Functions: 390 | - generateResponse: 391 | - file path: convex/index.ts 392 | - arguments: {channelId: v.id("channels")} 393 | - returns: v.null() 394 | - purpose: Generate a response from the AI for a given channel 395 | - loadContext: 396 | - file path: convex/index.ts 397 | - arguments: {channelId: v.id("channels")} 398 | - returns: v.array(v.object({ 399 | _id: v.id("messages"), 400 | _creationTime: v.number(), 401 | channelId: v.id("channels"), 402 | authorId: v.optional(v.id("users")), 403 | content: v.string(), 404 | })) 405 | - writeAgentResponse: 406 | - file path: convex/index.ts 407 | - arguments: {channelId: v.id("channels"), content: v.string()} 408 | - returns: v.null() 409 | - purpose: Write an AI response to a given channel 410 | 411 | 4. Schema Design: 412 | - users 413 | - validator: { name: v.string() } 414 | - indexes: <none> 415 | - channels 416 | - validator: { name: v.string() } 417 | - indexes: <none> 418 | - messages 419 | - validator: { channelId: v.id("channels"), authorId: v.optional(v.id("users")), content: v.string() } 420 | - indexes 421 | - by_channel: ["channelId"] 422 | 423 | 5. Background Processing: 424 | - AI response generation runs asynchronously after each user message 425 | - Uses OpenAI's GPT-4 to generate contextual responses 426 | - Maintains conversation context using recent message history 427 | 428 | 429 | ### Implementation 430 | 431 | #### package.json 432 | ```typescript 433 | { 434 | "name": "chat-app", 435 | "description": "This example shows how to build a chat app without authentication.", 436 | "version": "1.0.0", 437 | "dependencies": { 438 | "convex": "^1.17.4", 439 | "openai": "^4.79.0" 440 | }, 441 | "devDependencies": { 442 | "typescript": "^5.7.3" 443 | } 444 | } 445 | ``` 446 | 447 | #### tsconfig.json 448 | ```typescript 449 | { 450 | "compilerOptions": { 451 | "target": "ESNext", 452 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 453 | "skipLibCheck": true, 454 | "allowSyntheticDefaultImports": true, 455 | "strict": true, 456 | "forceConsistentCasingInFileNames": true, 457 | "module": "ESNext", 458 | "moduleResolution": "Bundler", 459 | "resolveJsonModule": true, 460 | "isolatedModules": true, 461 | "allowImportingTsExtensions": true, 462 | "noEmit": true, 463 | "jsx": "react-jsx" 464 | }, 465 | "exclude": ["convex"], 466 | "include": ["/src//.tsx", "/src//*.ts", "vite.config.ts"] 467 | } 468 | ``` 469 | 470 | #### convex/index.ts 471 | ```typescript 472 | import { 473 | query, 474 | mutation, 475 | internalQuery, 476 | internalMutation, 477 | internalAction, 478 | } from "./_generated/server"; 479 | import { v } from "convex/values"; 480 | import OpenAI from "openai"; 481 | import { internal } from "./_generated/api"; 482 | 483 | /** 484 | * Create a user with a given name. 485 | */ 486 | export const createUser = mutation({ 487 | args: { 488 | name: v.string(), 489 | }, 490 | returns: v.id("users"), 491 | handler: async (ctx, args) => { 492 | return await ctx.db.insert("users", { name: args.name }); 493 | }, 494 | }); 495 | 496 | /** 497 | * Create a channel with a given name. 498 | */ 499 | export const createChannel = mutation({ 500 | args: { 501 | name: v.string(), 502 | }, 503 | returns: v.id("channels"), 504 | handler: async (ctx, args) => { 505 | return await ctx.db.insert("channels", { name: args.name }); 506 | }, 507 | }); 508 | 509 | /** 510 | * List the 10 most recent messages from a channel in descending creation order. 511 | */ 512 | export const listMessages = query({ 513 | args: { 514 | channelId: v.id("channels"), 515 | }, 516 | returns: v.array( 517 | v.object({ 518 | _id: v.id("messages"), 519 | _creationTime: v.number(), 520 | channelId: v.id("channels"), 521 | authorId: v.optional(v.id("users")), 522 | content: v.string(), 523 | }), 524 | ), 525 | handler: async (ctx, args) => { 526 | const messages = await ctx.db 527 | .query("messages") 528 | .withIndex("by_channel", (q) => q.eq("channelId", args.channelId)) 529 | .order("desc") 530 | .take(10); 531 | return messages; 532 | }, 533 | }); 534 | 535 | /** 536 | * Send a message to a channel and schedule a response from the AI. 537 | */ 538 | export const sendMessage = mutation({ 539 | args: { 540 | channelId: v.id("channels"), 541 | authorId: v.id("users"), 542 | content: v.string(), 543 | }, 544 | returns: v.null(), 545 | handler: async (ctx, args) => { 546 | const channel = await ctx.db.get(args.channelId); 547 | if (!channel) { 548 | throw new Error("Channel not found"); 549 | } 550 | const user = await ctx.db.get(args.authorId); 551 | if (!user) { 552 | throw new Error("User not found"); 553 | } 554 | await ctx.db.insert("messages", { 555 | channelId: args.channelId, 556 | authorId: args.authorId, 557 | content: args.content, 558 | }); 559 | await ctx.scheduler.runAfter(0, internal.index.generateResponse, { 560 | channelId: args.channelId, 561 | }); 562 | return null; 563 | }, 564 | }); 565 | 566 | const openai = new OpenAI(); 567 | 568 | export const generateResponse = internalAction({ 569 | args: { 570 | channelId: v.id("channels"), 571 | }, 572 | returns: v.null(), 573 | handler: async (ctx, args) => { 574 | const context = await ctx.runQuery(internal.index.loadContext, { 575 | channelId: args.channelId, 576 | }); 577 | const response = await openai.chat.completions.create({ 578 | model: "gpt-4o", 579 | messages: context, 580 | }); 581 | const content = response.choices[0].message.content; 582 | if (!content) { 583 | throw new Error("No content in response"); 584 | } 585 | await ctx.runMutation(internal.index.writeAgentResponse, { 586 | channelId: args.channelId, 587 | content, 588 | }); 589 | return null; 590 | }, 591 | }); 592 | 593 | export const loadContext = internalQuery({ 594 | args: { 595 | channelId: v.id("channels"), 596 | }, 597 | returns: v.array( 598 | v.object({ 599 | role: v.union(v.literal("user"), v.literal("assistant")), 600 | content: v.string(), 601 | }), 602 | ), 603 | handler: async (ctx, args) => { 604 | const channel = await ctx.db.get(args.channelId); 605 | if (!channel) { 606 | throw new Error("Channel not found"); 607 | } 608 | const messages = await ctx.db 609 | .query("messages") 610 | .withIndex("by_channel", (q) => q.eq("channelId", args.channelId)) 611 | .order("desc") 612 | .take(10); 613 | 614 | const result = []; 615 | for (const message of messages) { 616 | if (message.authorId) { 617 | const user = await ctx.db.get(message.authorId); 618 | if (!user) { 619 | throw new Error("User not found"); 620 | } 621 | result.push({ 622 | role: "user" as const, 623 | content: `${user.name}: ${message.content}`, 624 | }); 625 | } else { 626 | result.push({ role: "assistant" as const, content: message.content }); 627 | } 628 | } 629 | return result; 630 | }, 631 | }); 632 | 633 | export const writeAgentResponse = internalMutation({ 634 | args: { 635 | channelId: v.id("channels"), 636 | content: v.string(), 637 | }, 638 | returns: v.null(), 639 | handler: async (ctx, args) => { 640 | await ctx.db.insert("messages", { 641 | channelId: args.channelId, 642 | content: args.content, 643 | }); 644 | return null; 645 | }, 646 | }); 647 | ``` 648 | 649 | #### convex/schema.ts 650 | ```typescript 651 | import { defineSchema, defineTable } from "convex/server"; 652 | import { v } from "convex/values"; 653 | 654 | export default defineSchema({ 655 | channels: defineTable({ 656 | name: v.string(), 657 | }), 658 | 659 | users: defineTable({ 660 | name: v.string(), 661 | }), 662 | 663 | messages: defineTable({ 664 | channelId: v.id("channels"), 665 | authorId: v.optional(v.id("users")), 666 | content: v.string(), 667 | }).index("by_channel", ["channelId"]), 668 | }); 669 | ``` 670 | 671 | #### src/App.tsx 672 | ```typescript 673 | export default function App() { 674 | return <div>Hello World</div>; 675 | } 676 | ``` 677 | 678 | -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?> 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 | <svg width="100%" height="100%" viewBox="0 0 420 461" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> 4 | <g transform="matrix(1,0,0,1,-48.2465,-53.3838)"> 5 | <g> 6 | <g id="convex.svg" transform="matrix(1,-0,-0,1,48.2465,53.3838)"> 7 | <use xlink:href="#_Image1" x="6.909" y="7.624" width="406.208px" height="444.557px" transform="matrix(0.998055,0,0,0.999005,0,0)"/> 8 | </g> 9 | </g> 10 | </g> 11 | <defs> 12 | <image id="_Image1" width="407px" height="445px" xlink:href="data:image/png;base64,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"/> 13 | </defs> 14 | </svg> 15 | --------------------------------------------------------------------------------