[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { EmptyState } from "@/components/empty-state" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/spaces/[id]/page.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { useParams, useRouter } from "next/navigation" import { useToast } from "@/hooks/use-toast" import { SpaceContent } from "@/components/space-content" import { getSpaceById } from "@/lib/data" import type { Space } from "@/lib/types" import { Skeleton } from "@/components/ui/skeleton" export default function SpacePage() { const params = useParams() const router = useRouter() const { toast } = useToast() const [space, setSpace] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { if (params.id) { const spaceId = Array.isArray(params.id) ? params.id[0] : params.id const fetchedSpace = getSpaceById(spaceId) if (fetchedSpace) { setSpace(fetchedSpace) } else { toast({ title: "Space not found", description: "The space you're looking for doesn't exist.", variant: "destructive", }) router.push("/") } setLoading(false) } }, [params.id, router, toast]) if (loading) { return (

) } if (!space) return null return (

{space.name}

) } [V0_FILE]typescriptreact:file="components/app-sidebar.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter, usePathname } from "next/navigation" import { Book, Users, Plus, ChevronDown, Settings, HelpCircle, LogOut, Trash2, Edit, MoreVertical } from "lucide-react" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, SidebarMenuAction, } from "@/components/ui/sidebar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger } from "@/components/ui/dialog" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { ModeToggle } from "@/components/mode-toggle" import { SearchTrigger } from "@/components/search-trigger" import { useToast } from "@/hooks/use-toast" import { getJournals, getSpaces, createJournal, createSpace, deleteJournal, deleteSpace, renameJournal, renameSpace, } from "@/lib/data" export function AppSidebar() { const router = useRouter() const pathname = usePathname() const { toast } = useToast() const [journalsOpen, setJournalsOpen] = useState(true) const [spacesOpen, setSpacesOpen] = useState(true) const [newJournalTitle, setNewJournalTitle] = useState("") const [newSpaceName, setNewSpaceName] = useState("") const [renameItemId, setRenameItemId] = useState("") const [renameValue, setRenameValue] = useState("") const [renameType, setRenameType] = useState<"journal" | "space" | "">("") const [deleteItemId, setDeleteItemId] = useState("") const [deleteType, setDeleteType] = useState<"journal" | "space" | "">("") const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false) const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false) const [isNewJournalDialogOpen, setIsNewJournalDialogOpen] = useState(false) const [isNewSpaceDialogOpen, setIsNewSpaceDialogOpen] = useState(false) const journals = getJournals() const spaces = getSpaces() const handleCreateJournal = () => { if (newJournalTitle.trim()) { const newJournal = createJournal(newJournalTitle) setNewJournalTitle("") setIsNewJournalDialogOpen(false) toast({ title: "Journal created", description: `Journal "${newJournal.title}" has been created.`, }) router.push(`/journals/${newJournal.id}`) } } const handleCreateSpace = () => { if (newSpaceName.trim()) { const newSpace = createSpace(newSpaceName) setNewSpaceName("") setIsNewSpaceDialogOpen(false) toast({ title: "Space created", description: `Space "${newSpace.name}" has been created.`, }) router.push(`/spaces/${newSpace.id}`) } } const handleRenameClick = (id: string, type: "journal" | "space", currentName: string) => { setRenameItemId(id) setRenameType(type) setRenameValue(currentName) setIsRenameDialogOpen(true) } const handleRename = () => { if (renameValue.trim() && renameItemId && renameType) { if (renameType === "journal") { renameJournal(renameItemId, renameValue) toast({ title: "Journal renamed", description: `Journal has been renamed to "${renameValue}".`, }) } else { renameSpace(renameItemId, renameValue) toast({ title: "Space renamed", description: `Space has been renamed to "${renameValue}".`, }) } setIsRenameDialogOpen(false) } } const handleDeleteClick = (id: string, type: "journal" | "space") => { setDeleteItemId(id) setDeleteType(type) setIsDeleteDialogOpen(true) } const handleDelete = () => { if (deleteItemId && deleteType) { if (deleteType === "journal") { deleteJournal(deleteItemId) toast({ title: "Journal deleted", description: "The journal has been deleted.", }) } else { deleteSpace(deleteItemId) toast({ title: "Space deleted", description: "The space has been deleted.", }) } setIsDeleteDialogOpen(false) router.push("/") } } return ( <>

Knowledge App

Journals

{journals.map((journal) => ( {journal.title} handleRenameClick(journal.id, "journal", journal.title)}> Rename handleDeleteClick(journal.id, "journal")} > Delete ))}

Spaces

{spaces.map((space) => ( {space.name} handleRenameClick(space.id, "space", space.name)}> Rename handleDeleteClick(space.id, "space")} > Delete ))} Settings Help Logout

v1.0.0

{/* Rename Dialog */} {/* Delete Confirmation Dialog */} Delete {deleteType === "journal" ? "Journal" : "Space"} This action cannot be undone. This will permanently delete the {deleteType === "journal" ? " journal" : " space"} and all its contents. Cancel Delete ) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" isMerged="true" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/search-provider.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" type SearchContextType = { isSearchOpen: boolean openSearch: () => void closeSearch: () => void searchQuery: string setSearchQuery: (query: string) => void } const SearchContext = createContext(undefined) export function SearchProvider({ children }: { children: ReactNode }) { const [isSearchOpen, setIsSearchOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const openSearch = () => { setIsSearchOpen(true) } const closeSearch = () => { setIsSearchOpen(false) setSearchQuery("") } return ( {children} ) } export function useSearch() { const context = useContext(SearchContext) if (context === undefined) { throw new Error("useSearch must be used within a SearchProvider") } return context } [V0_FILE]typescriptreact:file="components/search-trigger.tsx" isMerged="true" "use client" import { useEffect } from "react" import { Search } from "lucide-react" import { useSearch } from "@/components/search-provider" import { Button } from "@/components/ui/button" import { SearchDialog } from "@/components/search-dialog" export function SearchTrigger() { const { openSearch, isSearchOpen } = useSearch() useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault() openSearch() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [openSearch]) return ( <> {isSearchOpen && } ) } [V0_FILE]typescriptreact:file="components/search-dialog.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { Search, X, Book, Users } from "lucide-react" import { useSearch } from "@/components/search-provider" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { getJournals, getSpaces } from "@/lib/data" import type { Journal, Space } from "@/lib/types" export function SearchDialog() { const router = useRouter() const { isSearchOpen, closeSearch, searchQuery, setSearchQuery } = useSearch() const [journalResults, setJournalResults] = useState([]) const [spaceResults, setSpaceResults] = useState([]) const [selectedIndex, setSelectedIndex] = useState(0) const allResults = [...journalResults, ...spaceResults] useEffect(() => { if (searchQuery) { const journals = getJournals() const spaces = getSpaces() const filteredJournals = journals.filter( (journal) => journal.title.toLowerCase().includes(searchQuery.toLowerCase()) || journal.content.toLowerCase().includes(searchQuery.toLowerCase()), ) const filteredSpaces = spaces.filter( (space) => space.name.toLowerCase().includes(searchQuery.toLowerCase()) || space.content.toLowerCase().includes(searchQuery.toLowerCase()), ) setJournalResults(filteredJournals) setSpaceResults(filteredSpaces) setSelectedIndex(0) } else { setJournalResults([]) setSpaceResults([]) } }, [searchQuery]) useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (!isSearchOpen) return switch (e.key) { case "ArrowDown": e.preventDefault() setSelectedIndex((prev) => (prev < allResults.length - 1 ? prev + 1 : prev)) break case "ArrowUp": e.preventDefault() setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0)) break case "Enter": e.preventDefault() if (allResults.length > 0) { const selected = allResults[selectedIndex] if ("title" in selected) { router.push(`/journals/${selected.id}`) } else { router.push(`/spaces/${selected.id}`) } closeSearch() } break case "Escape": e.preventDefault() closeSearch() break } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isSearchOpen, selectedIndex, router, closeSearch, journalResults, spaceResults]) const handleResultClick = (type: "journal" | "space", id: string) => { router.push(type === "journal" ? `/journals/${id}` : `/spaces/${id}`) closeSearch() } return ( ) } [V0_FILE]typescriptreact:file="components/file-uploader.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Upload, File, X } from "lucide-react" import { Button } from "@/components/ui/button" import { useToast } from "@/hooks/use-toast" type UploadedFile = { id: string name: string size: number type: string url: string } export function FileUploader() { const [files, setFiles] = useState([]) const [isDragging, setIsDragging] = useState(false) const fileInputRef = useRef(null) const dropZoneRef = useRef(null) const { toast } = useToast() const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files) { addFiles(Array.from(e.target.files)) } } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) if (e.dataTransfer.files) { addFiles(Array.from(e.dataTransfer.files)) } } const handlePaste = (e: React.ClipboardEvent) => { if (e.clipboardData.files.length) { addFiles(Array.from(e.clipboardData.files)) } } const addFiles = (fileList: File[]) => { const newFiles = fileList.map((file) => ({ id: Math.random().toString(36).substring(2, 9), name: file.name, size: file.size, type: file.type, url: URL.createObjectURL(file), })) setFiles((prev) => [...prev, ...newFiles]) toast({ title: `${fileList.length} file${fileList.length > 1 ? "s" : ""} uploaded`, description: "Files have been attached to your journal.", }) } const removeFile = (id: string) => { setFiles((prev) => prev.filter((file) => file.id !== id)) } const formatFileSize = (bytes: number) => { if (bytes < 1024) return bytes + " bytes" else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB" else return (bytes / 1048576).toFixed(1) + " MB" } return (

Drag & drop files here

or paste from clipboard

{files.length > 0 && (

Attached Files

{files.map((file) => (

{file.name} ({formatFileSize(file.size)})

))}

)}

) } [V0_FILE]typescriptreact:file="components/ai-model-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { Sparkles, Loader2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" interface AIModelSelectorProps { onGenerate: (prompt: string, model: string) => void isGenerating: boolean } const models = [ { id: "gpt-4o", name: "GPT-4o", description: "Most capable model for complex tasks" }, { id: "claude-3", name: "Claude 3", description: "Balanced performance and speed" }, { id: "gemini-pro", name: "Gemini Pro", description: "Fast responses for general tasks" }, { id: "llama-3", name: "Llama 3", description: "Open source model with good performance" }, ] export function AIModelSelector({ onGenerate, isGenerating }: AIModelSelectorProps) { const [prompt, setPrompt] = useState("") const [selectedModel, setSelectedModel] = useState(models[0].id) const [searchMode, setSearchMode] = useState("standard") const handleGenerate = () => { if (prompt.trim()) { onGenerate(prompt, models.find((m) => m.id === selectedModel)?.name || selectedModel) } } return (

AI Model

Standard Academic

Prompt

setPrompt(e.target.value)}
          className="min-h-[100px]"
        />
      </div>

<Button onClick={handleGenerate} disabled={!prompt.trim() || isGenerating} className="w-full sm:w-auto">
        {isGenerating ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            Generating...
          </>
        ) : (
          <>
            <Sparkles className="mr-2 h-4 w-4" />
            Generate
          </>
        )}
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/empty-state.tsx" isMerged="true"
import { Book, Users, Search } from "lucide-react"
import { Button } from "@/components/ui/button"

export function EmptyState() {
  return (
    <div className="flex h-[calc(100vh-100px)] flex-col items-center justify-center text-center">
      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-muted">
          <Search className="h-10 w-10 text-muted-foreground" />
        </div>
        <h3 className="mt-4 text-2xl font-bold">Welcome to Knowledge App</h3>
        <p className="mt-2 text-muted-foreground">
          Your personal knowledge management system. Create journals, collaborate in spaces, and organize your thoughts.
        </p>
        <div className="mt-6 flex flex-col gap-2 sm:flex-row">
          <Button asChild>
            <a href="/journals/new">
              <Book className="mr-2 h-4 w-4" />
              Create Journal
            </a>
          </Button>
          <Button variant="outline" asChild>
            <a href="/spaces/new">
              <Users className="mr-2 h-4 w-4" />
              Create Space
            </a>
          </Button>
        </div>
        <p className="mt-4 text-xs text-muted-foreground">
          Press <kbd className="rounded border bg-muted px-1 font-mono">⌘K</kbd> to search
        </p>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;

--sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-primary: 0 0% 9%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0 0% 96.1%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 0 0% 89.8%;
    --sidebar-ring: 0 0% 3.9%;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;

--sidebar-background: 0 0% 9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 0 0% 98%;
    --sidebar-primary-foreground: 0 0% 9%;
    --sidebar-accent: 0 0% 14.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 14.9%;
    --sidebar-ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function useIsMobile() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkIsMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

// Initial check
    checkIsMobile()

// Add event listener
    window.addEventListener("resize", checkIsMobile)

// Clean up
    return () => window.removeEventListener("resize", checkIsMobile)
  }, [])

return isMobile
}
[V0_FILE]typescriptreact:file="lib/supabase.ts"
import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || ""
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

export type Database = {
  public: {
    Tables: {
      journals: {
        Row: {
          id: string
          title: string
          content: string
          created_at: string
          updated_at: string
          user_id: string
          tags: string[]
        }
        Insert: {
          id?: string
          title: string
          content?: string
          created_at?: string
          updated_at?: string
          user_id: string
          tags?: string[]
        }
        Update: {
          id?: string
          title?: string
          content?: string
          created_at?: string
          updated_at?: string
          user_id?: string
          tags?: string[]
        }
      }
      spaces: {
        Row: {
          id: string
          name: string
          content: string
          created_at: string
          updated_at: string
          user_id: string
          tags: string[]
        }
        Insert: {
          id?: string
          name: string
          content?: string
          created_at?: string
          updated_at?: string
          user_id: string
          tags?: string[]
        }
        Update: {
          id?: string
          name?: string
          content?: string
          created_at?: string
          updated_at?: string
          user_id?: string
          tags?: string[]
        }
      }
      messages: {
        Row: {
          id: string
          content: string
          sender: string
          timestamp: string
          space_id: string
          is_ai: boolean
        }
        Insert: {
          id?: string
          content: string
          sender: string
          timestamp?: string
          space_id: string
          is_ai?: boolean
        }
        Update: {
          id?: string
          content?: string
          sender?: string
          timestamp?: string
          space_id?: string
          is_ai?: boolean
        }
      }
      references: {
        Row: {
          id: string
          source_id: string
          source_type: string
          target_id: string
          target_type: string
          created_at: string
        }
        Insert: {
          id?: string
          source_id: string
          source_type: string
          target_id: string
          target_type: string
          created_at?: string
        }
        Update: {
          id?: string
          source_id?: string
          source_type?: string
          target_id?: string
          target_type?: string
          created_at?: string
        }
      }
      tags: {
        Row: {
          id: string
          name: string
          color: string
          user_id: string
        }
        Insert: {
          id?: string
          name: string
          color: string
          user_id: string
        }
        Update: {
          id?: string
          name?: string
          color?: string
          user_id?: string
        }
      }
    }
  }
}
[V0_FILE]typescriptreact:file="lib/data.ts" isFixed="true" isEdit="true" isQuickEdit="true"
import { supabase } from "@/lib/supabase"
import type { Journal, Space, Message, Tag, Reference } from "@/lib/types"

// Mock user ID (in a real app, this would come from authentication)
const USER_ID = "user-1"

// Journal functions
export async function getJournals(): Promise<Journal[]> {
  const { data, error } = await supabase
    .from("journals")
    .select("*, tags(*)")
    .eq("user_id", USER_ID)
    .order("updated_at", { ascending: false })

if (error) {
    console.error("Error fetching journals:", error)
    return []
  }

return data.map((journal) => ({
    id: journal.id,
    title: journal.title,
    content: journal.content,
    createdAt: journal.created_at,
    updatedAt: journal.updated_at,
    tags: journal.tags || [],
  }))
}

export async function getJournalById(id: string): Promise<Journal | null> {
  const { data, error } = await supabase.from("journals").select("*, tags(*)").eq("id", id).single()

if (error) {
    console.error("Error fetching journal:", error)
    return null
  }

return {
    id: data.id,
    title: data.title,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: data.tags || [],
  }
}

export async function createJournal(title: string): Promise<Journal | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("journals")
    .insert({
      title,
      content: "",
      created_at: now,
      updated_at: now,
      user_id: USER_ID,
      tags: [],
    })
    .select()
    .single()

if (error) {
    console.error("Error creating journal:", error)
    return null
  }

return {
    id: data.id,
    title: data.title,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: [],
  }
}

export async function updateJournal(id: string, content: string): Promise<Journal | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("journals")
    .update({
      content,
      updated_at: now,
    })
    .eq("id", id)
    .select("*, tags(*)")
    .single()

if (error) {
    console.error("Error updating journal:", error)
    return null
  }

return {
    id: data.id,
    title: data.title,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: data.tags || [],
  }
}

export async function renameJournal(id: string, title: string): Promise<Journal | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("journals")
    .update({
      title,
      updated_at: now,
    })
    .eq("id", id)
    .select("*, tags(*)")
    .single()

if (error) {
    console.error("Error renaming journal:", error)
    return null
  }

return {
    id: data.id,
    title: data.title,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: data.tags || [],
  }
}

export async function deleteJournal(id: string): Promise<boolean> {
  // First delete all references to this journal
  const { error: refError } = await supabase.from("references").delete().or(`source_id.eq.${id},target_id.eq.${id}`)

if (refError) {
    console.error("Error deleting journal references:", refError)
    return false
  }

const { error } = await supabase.from("journals").delete().eq("id", id)

if (error) {
    console.error("Error deleting journal:", error)
    return false
  }

return true
}

// Space functions
export async function getSpaces(): Promise<Space[]> {
  const { data, error } = await supabase
    .from("spaces")
    .select("*, tags(*)")
    .eq("user_id", USER_ID)
    .order("updated_at", { ascending: false })

if (error) {
    console.error("Error fetching spaces:", error)
    return []
  }

// Fetch messages for each space
  const spaces = await Promise.all(
    data.map(async (space) => {
      const { data: messages, error: msgError } = await supabase
        .from("messages")
        .select("*")
        .eq("space_id", space.id)
        .order("timestamp", { ascending: true })

if (msgError) {
        console.error("Error fetching messages:", msgError)
        return {
          id: space.id,
          name: space.name,
          content: space.content,
          createdAt: space.created_at,
          updatedAt: space.updated_at,
          tags: space.tags || [],
          messages: [],
        }
      }

return {
        id: space.id,
        name: space.name,
        content: space.content,
        createdAt: space.created_at,
        updatedAt: space.updated_at,
        tags: space.tags || [],
        messages: messages.map((msg) => ({
          id: msg.id,
          content: msg.content,
          sender: msg.sender,
          timestamp: msg.timestamp,
          isAI: msg.is_ai,
        })),
      }
    }),
  )

return spaces
}

export async function getSpaceById(id: string): Promise<Space | null> {
  const { data, error } = await supabase.from("spaces").select("*, tags(*)").eq("id", id).single()

if (error) {
    console.error("Error fetching space:", error)
    return null
  }

// Fetch messages for the space
  const { data: messages, error: msgError } = await supabase
    .from("messages")
    .select("*")
    .eq("space_id", id)
    .order("timestamp", { ascending: true })

if (msgError) {
    console.error("Error fetching messages:", msgError)
    return null
  }

return {
    id: data.id,
    name: data.name,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: data.tags || [],
    messages: messages.map((msg) => ({
      id: msg.id,
      content: msg.content,
      sender: msg.sender,
      timestamp: msg.timestamp,
      isAI: msg.is_ai,
    })),
  }
}

export async function createSpace(name: string): Promise<Space | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("spaces")
    .insert({
      name,
      content: "",
      created_at: now,
      updated_at: now,
      user_id: USER_ID,
      tags: [],
    })
    .select()
    .single()

if (error) {
    console.error("Error creating space:", error)
    return null
  }

return {
    id: data.id,
    name: data.name,
    content: data.content,
    createdAt: data.created_at,
    updatedAt: data.updated_at,
    tags: [],
    messages: [],
  }
}

export async function renameSpace(id: string, name: string): Promise<Space | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("spaces")
    .update({
      name,
      updated_at: now,
    })
    .eq("id", id)
    .select("*, tags(*)")
    .single()

if (error) {
    console.error("Error renaming space:", error)
    return null
  }

if (msgError) {
    console.error("Error fetching messages:", msgError)
    return null
  }

export async function deleteSpace(id: string): Promise<boolean> {
  // First delete all messages in the space
  const { error: msgError } = await supabase.from("messages").delete().eq("space_id", id)

if (msgError) {
    console.error("Error deleting space messages:", msgError)
    return false
  }

// Then delete all references to this space
  const { error: refError } = await supabase.from("references").delete().or(`source_id.eq.${id},target_id.eq.${id}`)

if (refError) {
    console.error("Error deleting space references:", refError)
    return false
  }

const { error } = await supabase.from("spaces").delete().eq("id", id)

if (error) {
    console.error("Error deleting space:", error)
    return false
  }

return true
}

export async function addMessageToSpace(spaceId: string, message: Omit<Message, "id">): Promise<Space | null> {
  const { data: msgData, error: msgError } = await supabase
    .from("messages")
    .insert({
      content: message.content,
      sender: message.sender,
      timestamp: message.timestamp,
      space_id: spaceId,
      is_ai: message.isAI || false,
    })
    .select()
    .single()

if (msgError) {
    console.error("Error adding message:", msgError)
    return null
  }

// Update the space's updated_at timestamp
  const now = new Date().toISOString()
  await supabase.from("spaces").update({ updated_at: now }).eq("id", spaceId)

// Return the updated space
  return getSpaceById(spaceId)
}

// Tag functions
export async function getTags(): Promise<Tag[]> {
  const { data, error } = await supabase
    .from("tags")
    .select("*")
    .eq("user_id", USER_ID)
    .order("name", { ascending: true })

if (error) {
    console.error("Error fetching tags:", error)
    return []
  }

return data.map((tag) => ({
    id: tag.id,
    name: tag.name,
    color: tag.color,
  }))
}

export async function createTag(name: string, color: string): Promise<Tag | null> {
  const { data, error } = await supabase
    .from("tags")
    .insert({
      name,
      color,
      user_id: USER_ID,
    })
    .select()
    .single()

if (error) {
    console.error("Error creating tag:", error)
    return null
  }

return {
    id: data.id,
    name: data.name,
    color: data.color,
  }
}

export async function updateTag(id: string, name: string, color: string): Promise<Tag | null> {
  const { data, error } = await supabase
    .from("tags")
    .update({
      name,
      color,
    })
    .eq("id", id)
    .select()
    .single()

if (error) {
    console.error("Error updating tag:", error)
    return null
  }

return {
    id: data.id,
    name: data.name,
    color: data.color,
  }
}

export async function deleteTag(id: string): Promise<boolean> {
  const { error } = await supabase.from("tags").delete().eq("id", id)

if (error) {
    console.error("Error deleting tag:", error)
    return false
  }

return true
}

// Add tags to items
export async function addTagToJournal(journalId: string, tagId: string): Promise<boolean> {
  // First get the current tags
  const { data, error } = await supabase.from("journals").select("tags").eq("id", journalId).single()

if (error) {
    console.error("Error fetching journal tags:", error)
    return false
  }

// Add the new tag if it's not already there
  const currentTags = data.tags || []
  if (!currentTags.includes(tagId)) {
    const { error: updateError } = await supabase
      .from("journals")
      .update({
        tags: [...currentTags, tagId],
      })
      .eq("id", journalId)

if (updateError) {
      console.error("Error adding tag to journal:", updateError)
      return false
    }
  }

return true
}

export async function removeTagFromJournal(journalId: string, tagId: string): Promise<boolean> {
  // First get the current tags
  const { data, error } = await supabase.from("journals").select("tags").eq("id", journalId).single()

if (error) {
    console.error("Error fetching journal tags:", error)
    return false
  }

// Remove the tag
  const currentTags = data.tags || []
  const { error: updateError } = await supabase
    .from("journals")
    .update({
      tags: currentTags.filter((id) => id !== tagId),
    })
    .eq("id", journalId)

if (updateError) {
    console.error("Error removing tag from journal:", updateError)
    return false
  }

return true
}

export async function addTagToSpace(spaceId: string, tagId: string): Promise<boolean> {
  // First get the current tags
  const { data, error } = await supabase.from("spaces").select("tags").eq("id", spaceId).single()

if (error) {
    console.error("Error fetching space tags:", error)
    return false
  }

// Add the new tag if it's not already there
  const currentTags = data.tags || []
  if (!currentTags.includes(tagId)) {
    const { error: updateError } = await supabase
      .from("spaces")
      .update({
        tags: [...currentTags, tagId],
      })
      .eq("id", spaceId)

if (updateError) {
      console.error("Error adding tag to space:", updateError)
      return false
    }
  }

return true
}

export async function removeTagFromSpace(spaceId: string, tagId: string): Promise<boolean> {
  // First get the current tags
  const { data, error } = await supabase.from("spaces").select("tags").eq("id", spaceId).single()

if (error) {
    console.error("Error fetching space tags:", error)
    return false
  }

// Remove the tag
  const currentTags = data.tags || []
  const { error: updateError } = await supabase
    .from("spaces")
    .update({
      tags: currentTags.filter((id) => id !== tagId),
    })
    .eq("id", spaceId)

if (updateError) {
    console.error("Error removing tag from space:", updateError)
    return false
  }

return true
}

// Cross-referencing functions
export async function createReference(
  sourceId: string,
  sourceType: "journal" | "space",
  targetId: string,
  targetType: "journal" | "space",
): Promise<Reference | null> {
  const now = new Date().toISOString()

const { data, error } = await supabase
    .from("references")
    .insert({
      source_id: sourceId,
      source_type: sourceType,
      target_id: targetId,
      target_type: targetType,
      created_at: now,
    })
    .select()
    .single()

if (error) {
    console.error("Error creating reference:", error)
    return null
  }

return {
    id: data.id,
    sourceId: data.source_id,
    sourceType: data.source_type,
    targetId: data.target_id,
    targetType: data.target_type,
    createdAt: data.created_at,
  }
}

export async function getReferencesForItem(itemId: string, itemType: "journal" | "space"): Promise<Reference[]> {
  // Get references where this item is the source
  const { data: sourceRefs, error: sourceError } = await supabase
    .from("references")
    .select("*")
    .eq("source_id", itemId)
    .eq("source_type", itemType)

if (sourceError) {
    console.error("Error fetching source references:", sourceError)
    return []
  }

// Get references where this item is the target
  const { data: targetRefs, error: targetError } = await supabase
    .from("references")
    .select("*")
    .eq("target_id", itemId)
    .eq("target_type", itemType)

if (targetError) {
    console.error("Error fetching target references:", targetError)
    return []
  }

// Combine and format the references
  const allRefs = [...sourceRefs, ...targetRefs].map((ref) => ({
    id: ref.id,
    sourceId: ref.source_id,
    sourceType: ref.source_type,
    targetId: ref.target_id,
    targetType: ref.target_type,
    createdAt: ref.created_at,
  }))

return allRefs
}

export async function deleteReference(id: string): Promise<boolean> {
  const { error } = await supabase.from("references").delete().eq("id", id)

if (error) {
    console.error("Error deleting reference:", error)
    return false
  }

return true
}
[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true"
export interface Journal {
  id: string
  title: string
  content: string
  createdAt: string
  updatedAt: string
  tags?: Tag[]
}

export interface Message {
  id: string
  content: string
  sender: string
  timestamp: string
  isAI?: boolean
}

export interface Space {
  id: string
  name: string
  content: string
  createdAt: string
  updatedAt: string
  messages: Message[]
  tags?: Tag[]
}

export interface Tag {
  id: string
  name: string
  color: string
}

export interface Reference {
  id: string
  sourceId: string
  sourceType: "journal" | "space"
  targetId: string
  targetType: "journal" | "space"
  createdAt: string
}

export interface KeyboardShortcut {
  key: string
  description: string
  modifier?: "ctrl" | "meta" | "shift" | "alt" | string
  action: () => void
}

export type ExportFormat = "pdf" | "markdown" | "html" | "text"
[V0_FILE]typescriptreact:file="components/keyboard-shortcuts-provider.tsx"
"use client"

import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import type { KeyboardShortcut } from "@/lib/types"

type KeyboardShortcutsContextType = {
  shortcuts: KeyboardShortcut[]
  registerShortcut: (shortcut: KeyboardShortcut) => void
  unregisterShortcut: (key: string, modifier?: string) => void
  isShortcutsDialogOpen: boolean
  openShortcutsDialog: () => void
  closeShortcutsDialog: () => void
}

const KeyboardShortcutsContext = createContext<KeyboardShortcutsContextType | undefined>(undefined)

export function KeyboardShortcutsProvider({ children }: { children: ReactNode }) {
  const [shortcuts, setShortcuts] = useState<KeyboardShortcut[]>([])
  const [isShortcutsDialogOpen, setIsShortcutsDialogOpen] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const registerShortcut = (shortcut: KeyboardShortcut) => {
    setShortcuts((prev) => {
      // Remove any existing shortcut with the same key and modifier
      const filtered = prev.filter((s) => !(s.key === shortcut.key && s.modifier === shortcut.modifier))
      return [...filtered, shortcut]
    })
  }

const unregisterShortcut = (key: string, modifier?: string) => {
    setShortcuts((prev) => prev.filter((s) => !(s.key === key && s.modifier === modifier)))
  }

const openShortcutsDialog = () => setIsShortcutsDialogOpen(true)
  const closeShortcutsDialog = () => setIsShortcutsDialogOpen(false)

useEffect(() => {
    // Register global shortcuts
    const globalShortcuts: KeyboardShortcut[] = [
      {
        key: "?",
        modifier: "shift",
        description: "Show keyboard shortcuts",
        action: () => openShortcutsDialog(),
      },
      {
        key: "h",
        modifier: "meta",
        description: "Go to home",
        action: () => router.push("/"),
      },
      {
        key: "j",
        modifier: "meta",
        description: "Create new journal",
        action: () => router.push("/journals/new"),
      },
      {
        key: "s",
        modifier: "meta",
        description: "Create new space",
        action: () => router.push("/spaces/new"),
      },
      {
        key: "e",
        modifier: "meta",
        description: "Export current item",
        action: () => {
          toast({
            title: "Export triggered",
            description: "Export dialog should open (if on a journal or space page)",
          })
        },
      },
    ]

globalShortcuts.forEach((shortcut) => registerShortcut(shortcut))

return () => {
      globalShortcuts.forEach((shortcut) => unregisterShortcut(shortcut.key, shortcut.modifier))
    }
  }, [router])

useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Don't trigger shortcuts when typing in input fields
      if (
        e.target instanceof HTMLInputElement ||
        e.target instanceof HTMLTextAreaElement ||
        e.target instanceof HTMLSelectElement
      ) {
        return
      }

shortcuts.forEach((shortcut) => {
        const keyMatch = e.key.toLowerCase() === shortcut.key.toLowerCase()
        let modifierMatch = true

if (shortcut.modifier) {
          if (shortcut.modifier === "meta" || shortcut.modifier === "cmd") {
            modifierMatch = e.metaKey
          } else if (shortcut.modifier === "ctrl") {
            modifierMatch = e.ctrlKey
          } else if (shortcut.modifier === "shift") {
            modifierMatch = e.shiftKey
          } else if (shortcut.modifier === "alt") {
            modifierMatch = e.altKey
          }
        } else {
          // If no modifier is specified, ensure no modifiers are pressed
          modifierMatch = !(e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
        }

if (keyMatch && modifierMatch) {
          e.preventDefault()
          shortcut.action()
        }
      })
    }

window.addEventListener("keydown", handleKeyDown)
    return () => window.removeEventListener("keydown", handleKeyDown)
  }, [shortcuts])

return (
    <KeyboardShortcutsContext.Provider
      value={{
        shortcuts,
        registerShortcut,
        unregisterShortcut,
        isShortcutsDialogOpen,
        openShortcutsDialog,
        closeShortcutsDialog,
      }}
    >
      {children}
    </KeyboardShortcutsContext.Provider>
  )
}

export function useKeyboardShortcuts() {
  const context = useContext(KeyboardShortcutsContext)
  if (context === undefined) {
    throw new Error("useKeyboardShortcuts must be used within a KeyboardShortcutsProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/keyboard-shortcuts-dialog.tsx"
"use client"

import { useKeyboardShortcuts } from "@/components/keyboard-shortcuts-provider"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

export function KeyboardShortcutsDialog() {
  const { isShortcutsDialogOpen, closeShortcutsDialog, shortcuts } = useKeyboardShortcuts()

// Group shortcuts by category
  const groupedShortcuts = shortcuts.reduce(
    (acc, shortcut) => {
      const category = shortcut.description.includes("journal")
        ? "Journals"
        : shortcut.description.includes("space")
          ? "Spaces"
          : "General"

if (!acc[category]) {
        acc[category] = []
      }

acc[category].push(shortcut)
      return acc
    },
    {} as Record<string, typeof shortcuts>,
  )

// Ensure "General" category is first
  const categories = Object.keys(groupedShortcuts).sort((a, b) => {
    if (a === "General") return -1
    if (b === "General") return 1
    return a.localeCompare(b)
  })

const formatKey = (key: string) => {
    if (key === " ") return "Space"
    return key.toUpperCase()
  }

const formatModifier = (modifier?: string) => {
    if (!modifier) return ""

switch (modifier) {
      case "meta":
      case "cmd":
        return "⌘"
      case "ctrl":
        return "Ctrl"
      case "shift":
        return "⇧"
      case "alt":
        return "Alt"
      default:
        return modifier
    }
  }

return (
    <Dialog open={isShortcutsDialogOpen} onOpenChange={closeShortcutsDialog}>
      <DialogContent className="sm:max-w-[550px]">
        <DialogHeader>
          <DialogTitle>Keyboard Shortcuts</DialogTitle>
        </DialogHeader>
        <div className="grid gap-6 py-4">
          {categories.map((category) => (
            <div key={category}>
              <h3 className="mb-2 text-sm font-semibold">{category}</h3>
              <div className="space-y-2">
                {groupedShortcuts[category].map((shortcut, index) => (
                  <div key={index} className="flex items-center justify-between">
                    <span className="text-sm">{shortcut.description}</span>
                    <div className="flex items-center gap-1">
                      {shortcut.modifier && (
                        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground">
                          {formatModifier(shortcut.modifier)}
                        </kbd>
                      )}
                      <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground">
                        {formatKey(shortcut.key)}
                      </kbd>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/tag-management.tsx"
"use client"

import { useState, useEffect } from "react"
import { Plus, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import {
  getTags,
  createTag,
  addTagToJournal,
  removeTagFromJournal,
  addTagToSpace,
  removeTagFromSpace,
} from "@/lib/data"
import type { Tag } from "@/lib/types"
import { useToast } from "@/hooks/use-toast"

interface TagManagementProps {
  itemId: string
  itemType: "journal" | "space"
  currentTags?: Tag[]
  onTagsChange?: (tags: Tag[]) => void
}

export function TagManagement({ itemId, itemType, currentTags = [], onTagsChange }: TagManagementProps) {
  const [tags, setTags] = useState<Tag[]>([])
  const [isTagDialogOpen, setIsTagDialogOpen] = useState(false)
  const [newTagName, setNewTagName] = useState("")
  const [newTagColor, setNewTagColor] = useState("#000000")
  const [isTagPopoverOpen, setIsTagPopoverOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

useEffect(() => {
    loadTags()
  }, [])

const loadTags = async () => {
    const fetchedTags = await getTags()
    setTags(fetchedTags)
  }

const handleCreateTag = async () => {
    if (!newTagName.trim()) return

setIsLoading(true)
    const newTag = await createTag(newTagName, newTagColor)
    setIsLoading(false)

if (newTag) {
      setTags((prev) => [...prev, newTag])
      setNewTagName("")
      setNewTagColor("#000000")
      setIsTagDialogOpen(false)

toast({
        title: "Tag created",
        description: `Tag "${newTag.name}" has been created.`,
      })
    }
  }

const handleAddTag = async (tag: Tag) => {
    setIsLoading(true)
    let success = false

if (itemType === "journal") {
      success = await addTagToJournal(itemId, tag.id)
    } else {
      success = await addTagToSpace(itemId, tag.id)
    }

setIsLoading(false)

if (success) {
      const updatedTags = [...currentTags, tag]
      onTagsChange?.(updatedTags)

toast({
        title: "Tag added",
        description: `Tag "${tag.name}" has been added.`,
      })
    }

setIsTagPopoverOpen(false)
  }

const handleRemoveTag = async (tagId: string) => {
    setIsLoading(true)
    let success = false

if (itemType === "journal") {
      success = await removeTagFromJournal(itemId, tagId)
    } else {
      success = await removeTagFromSpace(itemId, tagId)
    }

setIsLoading(false)

if (success) {
      const updatedTags = currentTags.filter((tag) => tag.id !== tagId)
      onTagsChange?.(updatedTags)

toast({
        title: "Tag removed",
        description: "Tag has been removed.",
      })
    }
  }

const availableTags = tags.filter((tag) => !currentTags.some((currentTag) => currentTag.id === tag.id))

return (
    <div>
      <div className="flex flex-wrap items-center gap-2">
        {currentTags.map((tag) => (
          <Badge
            key={tag.id}
            style={{ backgroundColor: tag.color, color: getContrastColor(tag.color) }}
            className="flex items-center gap-1"
          >
            {tag.name}
            <Button
              variant="ghost"
              size="sm"
              className="h-4 w-4 p-0 text-current opacity-70 hover:opacity-100"
              onClick={() => handleRemoveTag(tag.id)}
              disabled={isLoading}
            >
              <X className="h-3 w-3" />
              <span className="sr-only">Remove {tag.name}</span>
            </Button>
          </Badge>
        ))}

<Popover open={isTagPopoverOpen} onOpenChange={setIsTagPopoverOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              size="sm"
              className="h-6 gap-1"
              disabled={isLoading || availableTags.length === 0}
            >
              <Plus className="h-3 w-3" />
              Add Tag
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-60 p-2">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <h4 className="text-sm font-medium">Add Tag</h4>
                <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => setIsTagDialogOpen(true)}>
                  <Plus className="h-4 w-4" />
                  <span className="sr-only">Create Tag</span>
                </Button>
              </div>

{availableTags.length > 0 ? (
                <div className="max-h-40 overflow-auto space-y-1">
                  {availableTags.map((tag) => (
                    <Button
                      key={tag.id}
                      variant="ghost"
                      size="sm"
                      className="w-full justify-start gap-2"
                      onClick={() => handleAddTag(tag)}
                      disabled={isLoading}
                    >
                      <div className="h-3 w-3 rounded-full" style={{ backgroundColor: tag.color }} />
                      {tag.name}
                    </Button>
                  ))}
                </div>
              ) : (
                <p className="text-xs text-muted-foreground py-2">No more tags available. Create a new tag.</p>
              )}
            </div>
          </PopoverContent>
        </Popover>
      </div>

<Dialog open={isTagDialogOpen} onOpenChange={setIsTagDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Create New Tag</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <label htmlFor="tag-name" className="text-sm font-medium">
                Name
              </label>
              <Input
                id="tag-name"
                placeholder="Tag name"
                value={newTagName}
                onChange={(e) => setNewTagName(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <label htmlFor="tag-color" className="text-sm font-medium">
                Color
              </label>
              <div className="flex items-center gap-2">
                <div className="h-8 w-8 rounded-md border" style={{ backgroundColor: newTagColor }} />
                <Input
                  id="tag-color"
                  type="color"
                  value={newTagColor}
                  onChange={(e) => setNewTagColor(e.target.value)}
                  className="w-16 h-8 p-1"
                />
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsTagDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleCreateTag} disabled={!newTagName.trim() || isLoading}>
              Create
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

// Helper function to determine text color based on background color
function getContrastColor(hexColor: string): string {
  // Convert hex to RGB
  const r = Number.parseInt(hexColor.slice(1, 3), 16)
  const g = Number.parseInt(hexColor.slice(3, 5), 16)
  const b = Number.parseInt(hexColor.slice(5, 7), 16)

// Calculate luminance
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255

// Return black or white based on luminance
  return luminance > 0.5 ? "#000000" : "#ffffff"
}
[V0_FILE]typescriptreact:file="components/export-dialog.tsx"
"use client"

import { useState } from "react"
import { Download, FileText, FileCode, File } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { useToast } from "@/hooks/use-toast"
import type { ExportFormat } from "@/lib/types"

interface ExportDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  title: string
  content: string
  type: "journal" | "space"
}

export function ExportDialog({ open, onOpenChange, title, content, type }: ExportDialogProps) {
  const [format, setFormat] = useState<ExportFormat>("markdown")
  const [isExporting, setIsExporting] = useState(false)
  const { toast } = useToast()

const handleExport = async () => {
    setIsExporting(true)

try {
      let exportedContent = content
      let mimeType = "text/plain"
      let fileExtension = "txt"

// Format the content based on the selected format
      switch (format) {
        case "markdown":
          exportedContent = `# ${title}\n\n${content}`
          mimeType = "text/markdown"
          fileExtension = "md"
          break
        case "html":
          exportedContent = `<!DOCTYPE html>
<html>
<head>
  <title>${title}</title>
  <meta charset="utf-8">
</head>
<body>
  <h1>${title}</h1>
  <div>${content.replace(/\n/g, "<br>")}</div>
</body>
</html>`
          mimeType = "text/html"
          fileExtension = "html"
          break
        case "pdf":
          // In a real app, we would use a PDF generation library
          // For this demo, we'll just show a toast
          toast({
            title: "PDF Export",
            description: "PDF export would be handled by a server-side PDF generation library in a real app.",
          })
          setIsExporting(false)
          return
        case "text":
          exportedContent = `${title}\n\n${content}`
          mimeType = "text/plain"
          fileExtension = "txt"
          break
      }

// Create a blob and download it
      const blob = new Blob([exportedContent], { type: mimeType })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `${title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.${fileExtension}`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

toast({
        title: "Export successful",
        description: `${type === "journal" ? "Journal" : "Space"} exported as ${format.toUpperCase()}.`,
      })

onOpenChange(false)
    } catch (error) {
      console.error("Export error:", error)
      toast({
        title: "Export failed",
        description: "There was an error exporting your content.",
        variant: "destructive",
      })
    } finally {
      setIsExporting(false)
    }
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Export {type === "journal" ? "Journal" : "Space"}</DialogTitle>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          <div className="space-y-2">
            <h3 className="text-sm font-medium">Export Format</h3>
            <RadioGroup value={format} onValueChange={(value) => setFormat(value as ExportFormat)}>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="markdown" id="markdown" />
                <Label htmlFor="markdown" className="flex items-center gap-2">
                  <FileText className="h-4 w-4" />
                  Markdown
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="html" id="html" />
                <Label htmlFor="html" className="flex items-center gap-2">
                  <FileCode className="h-4 w-4" />
                  HTML
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="pdf" id="pdf" />
                <Label htmlFor="pdf" className="flex items-center gap-2">
                  <File className="h-4 w-4" />
                  PDF
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="text" id="text" />
                <Label htmlFor="text" className="flex items-center gap-2">
                  <File className="h-4 w-4" />
                  Plain Text
                </Label>
              </div>
            </RadioGroup>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button onClick={handleExport} disabled={isExporting} className="gap-2">
            {isExporting ? (
              <>Exporting...</>
            ) : (
              <>
                <Download className="h-4 w-4" />
                Export
              </>
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/reference-selector.tsx"
"use client"

import { useState, useEffect } from "react"
import { Link, Book, Users, Plus, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area"
import { getJournals, getSpaces, createReference, getReferencesForItem, deleteReference } from "@/lib/data"
import type { Journal, Space, Reference } from "@/lib/types"
import { useToast } from "@/hooks/use-toast"

interface ReferenceSelectorProps {
  itemId: string
  itemType: "journal" | "space"
}

export function ReferenceSelector({ itemId, itemType }: ReferenceSelectorProps) {
  const [isDialogOpen, setIsDialogOpen] = useState(false)
  const [activeTab, setActiveTab] = useState<"journals" | "spaces">("journals")
  const [journals, setJournals] = useState<Journal[]>([])
  const [spaces, setSpaces] = useState<Space[]>([])
  const [references, setReferences] = useState<Reference[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()

useEffect(() => {
    loadData()
  }, [itemId, itemType])

const loadData = async () => {
    setIsLoading(true)

try {
      const [fetchedJournals, fetchedSpaces, fetchedReferences] = await Promise.all([
        getJournals(),
        getSpaces(),
        getReferencesForItem(itemId, itemType),
      ])

setJournals(fetchedJournals)
      setSpaces(fetchedSpaces)
      setReferences(fetchedReferences)
    } catch (error) {
      console.error("Error loading reference data:", error)
      toast({
        title: "Error loading data",
        description: "There was an error loading references.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleAddReference = async (targetId: string, targetType: "journal" | "space") => {
    setIsLoading(true)

try {
      const newReference = await createReference(itemId, itemType, targetId, targetType)

if (newReference) {
        setReferences((prev) => [...prev, newReference])

toast({
          title: "Reference added",
          description: `Reference to ${targetType} has been added.`,
        })
      }
    } catch (error) {
      console.error("Error adding reference:", error)
      toast({
        title: "Error adding reference",
        description: "There was an error adding the reference.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
      setIsDialogOpen(false)
    }
  }

const handleRemoveReference = async (referenceId: string) => {
    setIsLoading(true)

try {
      const success = await deleteReference(referenceId)

if (success) {
        setReferences((prev) => prev.filter((ref) => ref.id !== referenceId))

toast({
          title: "Reference removed",
          description: "Reference has been removed.",
        })
      }
    } catch (error) {
      console.error("Error removing reference:", error)
      toast({
        title: "Error removing reference",
        description: "There was an error removing the reference.",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const filteredJournals = journals
    .filter((journal) => journal.id !== itemId && journal.title.toLowerCase().includes(searchQuery.toLowerCase()))
    .filter(
      (journal) =>
        !references.some(
          (ref) =>
            (ref.sourceId === itemId && ref.targetId === journal.id && ref.targetType === "journal") ||
            (ref.targetId === itemId && ref.sourceId === journal.id && ref.sourceType === "journal"),
        ),
    )

const filteredSpaces = spaces
    .filter((space) => space.id !== itemId && space.name.toLowerCase().includes(searchQuery.toLowerCase()))
    .filter(
      (space) =>
        !references.some(
          (ref) =>
            (ref.sourceId === itemId && ref.targetId === space.id && ref.targetType === "space") ||
            (ref.targetId === itemId && ref.sourceId === space.id && ref.sourceType === "space"),
        ),
    )

// Get the referenced items
  const referencedItems = references
    .map((ref) => {
      const isSource = ref.sourceId === itemId
      const targetId = isSource ? ref.targetId : ref.sourceId
      const targetType = isSource ? ref.targetType : ref.sourceType

if (targetType === "journal") {
        const journal = journals.find((j) => j.id === targetId)
        return journal
          ? {
              id: ref.id,
              targetId,
              targetType,
              title: journal.title,
              isSource,
            }
          : null
      } else {
        const space = spaces.find((s) => s.id === targetId)
        return space
          ? {
              id: ref.id,
              targetId,
              targetType,
              title: space.name,
              isSource,
            }
          : null
      }
    })
    .filter(Boolean)

return (
    <div>
      <div className="mb-4">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-medium">References</h3>
          <Button variant="outline" size="sm" className="h-7 gap-1" onClick={() => setIsDialogOpen(true)}>
            <Plus className="h-3 w-3" />
            Add Reference
          </Button>
        </div>

{referencedItems.length > 0 ? (
          <div className="space-y-2">
            {referencedItems.map((item) => (
              <div key={item!.id} className="flex items-center justify-between rounded-md border p-2 text-sm">
                <div className="flex items-center gap-2">
                  {item!.targetType === "journal" ? <Book className="h-4 w-4" /> : <Users className="h-4 w-4" />}
                  <a href={`/${item!.targetType}s/${item!.targetId}`} className="font-medium hover:underline">
                    {item!.title}
                  </a>
                  <span className="text-xs text-muted-foreground">
                    {item!.isSource ? "Referenced by this" : "References this"}
                  </span>
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 w-6 p-0"
                  onClick={() => handleRemoveReference(item!.id)}
                  disabled={isLoading}
                >
                  <X className="h-4 w-4" />
                  <span className="sr-only">Remove</span>
                </Button>
              </div>
            ))}
          </div>
        ) : (
          <div className="rounded-md border p-4 text-center text-sm text-muted-foreground">
            No references yet. Add a reference to link this {itemType} with other content.
          </div>
        )}
      </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>Add Reference</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "journals" | "spaces")}>
              <TabsList className="grid w-full grid-cols-2">
                <TabsTrigger value="journals">Journals</TabsTrigger>
                <TabsTrigger value="spaces">Spaces</TabsTrigger>
              </TabsList>
              <div className="mt-4 mb-2">
                <Input
                  placeholder="Search..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="mb-2"
                />
              </div>
              <TabsContent value="journals">
                <ScrollArea className="h-60">
                  {filteredJournals.length > 0 ? (
                    <div className="space-y-2">
                      {filteredJournals.map((journal) => (
                        <div
                          key={journal.id}
                          className="flex items-center justify-between rounded-md border p-2 text-sm"
                        >
                          <div className="flex items-center gap-2">
                            <Book className="h-4 w-4" />
                            <span className="font-medium">{journal.title}</span>
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            className="h-7 gap-1"
                            onClick={() => handleAddReference(journal.id, "journal")}
                            disabled={isLoading}
                          >
                            <Link className="h-3 w-3" />
                            Link
                          </Button>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="py-8 text-center text-sm text-muted-foreground">
                      {searchQuery ? "No matching journals found." : "No journals available to reference."}
                    </div>
                  )}
                </ScrollArea>
              </TabsContent>
              <TabsContent value="spaces">
                <ScrollArea className="h-60">
                  {filteredSpaces.length > 0 ? (
                    <div className="space-y-2">
                      {filteredSpaces.map((space) => (
                        <div key={space.id} className="flex items-center justify-between rounded-md border p-2 text-sm">
                          <div className="flex items-center gap-2">
                            <Users className="h-4 w-4" />
                            <span className="font-medium">{space.name}</span>
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            className="h-7 gap-1"
                            onClick={() => handleAddReference(space.id, "space")}
                            disabled={isLoading}
                          >
                            <Link className="h-3 w-3" />
                            Link
                          </Button>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="py-8 text-center text-sm text-muted-foreground">
                      {searchQuery ? "No matching spaces found." : "No spaces available to reference."}
                    </div>
                  )}
                </ScrollArea>
              </TabsContent>
            </Tabs>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
              Cancel
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/space-content.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useRef, useEffect, useCallback } from "react"
import { Send, Plus, Bot, User, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Separator } from "@/components/ui/separator"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useToast } from "@/hooks/use-toast"
import { TagManagement } from "@/components/tag-management"
import { ReferenceSelector } from "@/components/reference-selector"
import { ExportDialog } from "@/components/export-dialog"
import type { Space, Message, Tag } from "@/lib/types"
import { addMessageToSpace } from "@/lib/data"
import { useKeyboardShortcuts } from "@/components/keyboard-shortcuts-provider"
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"
import { groq } from "@ai-sdk/groq"

interface SpaceContentProps {
  space: Space
}

export function SpaceContent({ space }: SpaceContentProps) {
  const [newMessage, setNewMessage] = useState("")
  const [messages, setMessages] = useState<Message[]>(space.messages || [])
  const [tags, setTags] = useState<Tag[]>(space.tags || [])
  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)
  const [selectedModel, setSelectedModel] = useState("gpt-4o")
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const { toast } = useToast()
  const { registerShortcut, unregisterShortcut } = useKeyboardShortcuts()

const handleSendMessage = useCallback(async () => {
    if (!newMessage.trim()) return

const userMessage: Message = {
      id: Date.now().toString(),
      content: newMessage,
      sender: "User",
      timestamp: new Date().toISOString(),
      isAI: false
    }

// Add user message immediately for better UX
    setMessages(prev => [...prev, userMessage])
    setNewMessage("")

try {
      // Add the message to the database
      const updatedSpace = await addMessageToSpace(space.id, userMessage)
      
      if (updatedSpace) {
        // If AI is enabled, generate a response
        if (selectedModel) {
          setIsGenerating(true)
          
          try {
            // Choose the AI model based on selection
            const model = selectedModel.startsWith('gpt') 
              ? openai(selectedModel) 
              : groq(selectedModel)
            
            // Generate AI response
            const { text } = await generateText({
              model,
              prompt: `You are a helpful assistant in a knowledge management application. 
                      The user is working in a space called "${space.name}".
                      Respond to the following message: "${newMessage}"`,
              system: "You are a helpful, concise assistant. Provide clear and accurate information."
            })
            
            // Create AI message
            const aiMessage: Message = {
              id: Date.now().toString(),
              content: text,
              sender: "AI Assistant",
              timestamp: new Date().toISOString(),
              isAI: true
            }
            
            // Add AI message to the database
            await addMessageToSpace(space.id, aiMessage)
            
            // Update local state
            setMessages(prev => [...prev, aiMessage])
          } catch (error) {
            console.error('Error generating AI response:', error)
            toast({
              title: "AI response failed",
              description: "There was an error generating the AI response.",
              variant: "destructive",
            })
          } finally {
            setIsGenerating(false)
          }
        }
      }
    } catch (error) {
      console.error('Error sending message:', error)
      toast({
        title: "Message failed",
        description: "There was an error sending your message.",
        variant: "destructive",
      })
    }
  }
\
  const handleExport = useCallback(() => {
    setIsExportDialogOpen(true)
  }, [])

const handleSend = useCallback(async () => {
    await handleSendMessage()
  }, [handleSendMessage])

useEffect(() => {
    // Register keyboard shortcuts
    const shortcuts = [
      {
        key: "e",
        modifier: "meta",
        description: "Export space content",
        action: handleExport,
      },
      {
        key: "Enter",
        modifier: "meta",
        description: "Send message",
        action: handleSend,
      },
    ]

shortcuts.forEach((shortcut) => registerShortcut(shortcut))

return () => {
      shortcuts.forEach((shortcut) => unregisterShortcut(shortcut.key, shortcut.modifier))
    }
  }, [registerShortcut, unregisterShortcut, handleExport, handleSend])

useEffect(() => {
    // Scroll to bottom when messages change
    scrollToBottom()
  }, [messages])

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("en-US", {
      month: "short",
      day: "numeric",
      hour: "numeric",
      minute: "numeric",
    }).format(date)
  }

const handleTagsChange = (newTags: Tag[]) => {
    setTags(newTags)
  }

return (
    <div className="flex flex-col space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <TagManagement itemId={space.id} itemType="space" currentTags={tags} onTagsChange={handleTagsChange} />

<div className="flex items-center gap-2">
          <Select value={selectedModel} onValueChange={setSelectedModel}>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select AI model" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="gpt-4o">OpenAI GPT-4o</SelectItem>
              <SelectItem value="gpt-3.5-turbo">OpenAI GPT-3.5</SelectItem>
              <SelectItem value="llama-3-8b-8192">Groq Llama 3</SelectItem>
              <SelectItem value="none">No AI (Disabled)</SelectItem>
            </SelectContent>
          </Select>

<Button variant="outline" size="sm" onClick={() => setIsExportDialogOpen(true)}>
            Export
          </Button>
        </div>
      </div>

<div className="flex h-[calc(100vh-350px)] flex-col">
        <div className="flex-1 overflow-auto p-4">
          {messages.length > 0 ? (
            <div className="space-y-4">
              {messages.map((message) => (
                <div key={message.id} className="flex items-start gap-3">
                  <Avatar>
                    <AvatarFallback>
                      {message.isAI ? <Bot className="h-4 w-4" /> : <User className="h-4 w-4" />}
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{message.sender}</span>
                      <span className="text-xs text-muted-foreground">{formatDate(message.timestamp)}</span>
                    </div>
                    <div className="text-sm whitespace-pre-wrap">{message.content}</div>
                  </div>
                </div>
              ))}
              <div ref={messagesEndRef} />
            </div>
          ) : (
            <div className="flex h-full flex-col items-center justify-center text-center">
              <div className="rounded-full bg-muted p-3">
                <Plus className="h-6 w-6 text-muted-foreground" />
              </div>
              <h3 className="mt-4 text-lg font-medium">No messages yet</h3>
              <p className="mt-2 text-sm text-muted-foreground">Start the conversation by sending a message below.</p>
            </div>
          )}
        </div>

<div className="p-4">
          <div className="flex gap-2">
            <Textarea
              placeholder="Type your message..."
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              className="min-h-[80px]"
              onKeyDown={(e) => {
                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                  e.preventDefault()
                  handleSendMessage()
                }
              }}
              disabled={isGenerating}
            />
            <div className="flex flex-col justify-end">
              <Button onClick={handleSendMessage} disabled={!newMessage.trim() || isGenerating} className="gap-1">
                {isGenerating ? (
                  <>
                    <Sparkles className="h-4 w-4 animate-pulse" />
                    AI...
                  </>
                ) : (
                  <>
                    <Send className="h-4 w-4" />
                    Send
                  </>
                )}
              </Button>
            </div>
          </div>
          <p className="mt-2 text-xs text-muted-foreground">
            Press <kbd className="rounded border bg-muted px-1 font-mono">⌘</kbd> +{" "}
            <kbd className="rounded border bg-muted px-1 font-mono">Enter</kbd> to send
          </p>
        </div>
      </div>

<ExportDialog
        open={isExportDialogOpen}
        onOpenChange={setIsExportDialogOpen}
        title={space.name}
        content={messages.map((m) => `${m.sender} (${formatDate(m.timestamp)}): ${m.content}`).join("\n\n")}
        type="space"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/journal-editor.tsx" isEdit="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Save, Paperclip, X, Download } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { useToast } from "@/hooks/use-toast"
import { FileUploader } from "@/components/file-uploader"
import { AIModelSelector } from "@/components/ai-model-selector"
import { TagManagement } from "@/components/tag-management"
import { ReferenceSelector } from "@/components/reference-selector"
import { ExportDialog } from "@/components/export-dialog"
import { useKeyboardShortcuts } from "@/components/keyboard-shortcuts-provider"
import type { Tag } from "@/lib/types"

interface JournalEditorProps {
  journalId: string
  initialContent: string
  initialTags?: Tag[]
  onSave: (content: string) => void
  onTagsChange?: (tags: Tag[]) => void
}

export function JournalEditor({
  journalId,
  initialContent,
  initialTags = [],
  onSave,
  onTagsChange,
}: JournalEditorProps) {
  const [content, setContent] = useState(initialContent)
  const [tags, setTags] = useState<Tag[]>(initialTags)
  const [showAttachments, setShowAttachments] = useState(false)
  const [showAI, setShowAI] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)
  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false)
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  const { toast } = useToast()
  const { registerShortcut, unregisterShortcut } = useKeyboardShortcuts()
  const MAX_CHARS = 10000

useEffect(() => {
    // Register keyboard shortcuts
    const shortcuts = [
      {
        key: "s",
        modifier: "meta",
        description: "Save journal",
        action: () => handleSave(),
      },
      {
        key: "e",
        modifier: "meta",
        description: "Export journal",
        action: () => setIsExportDialogOpen(true),
      },
    ]

shortcuts.forEach((shortcut) => registerShortcut(shortcut))

return () => {
      shortcuts.forEach((shortcut) => unregisterShortcut(shortcut.key, shortcut.modifier))
    }
  }, [content, registerShortcut, unregisterShortcut])

const handleSave = () => {
    if (content.trim()) {
      onSave(content)
    } else {
      toast({
        title: "Cannot save empty journal",
        description: "Please add some content to your journal.",
        variant: "destructive",
      })
    }
  }

const handleAIGenerate = (prompt: string, model: string) => {
    setIsGenerating(true)

// Simulate AI generation
    setTimeout(() => {
      const aiResponse = `Here's a response to your prompt: "${prompt}" using model: ${model}.\n\nThis is a simulated AI response that would be generated by the selected model. In a real implementation, this would connect to an AI service API to generate content based on your prompt.`

setContent((prev) => prev + "\n\n" + aiResponse)
      setIsGenerating(false)
      setShowAI(false)

toast({
        title: "AI content generated",
        description: `Generated content using ${model}`,
      })
    }, 1500)
  }

const handleTagsUpdate = (newTags: Tag[]) => {
    setTags(newTags)
    onTagsChange?.(newTags)
  }

return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <TagManagement itemId={journalId} itemType="journal" currentTags={tags} onTagsChange={handleTagsUpdate} />

<Button variant="outline" onClick={() => setIsExportDialogOpen(true)} className="gap-1">
            <Download className="h-4 w-4" />
            Export
          </Button>
        </div>
      </div>

<div className="relative">
        <Textarea
          ref={textareaRef}
          value={content}
          onChange={(e) => {
            if (e.target.value.length <= MAX_CHARS) {
              setContent(e.target.value)
            }
          }}
          placeholder="Write your thoughts here..."
          className="min-h-[300px] resize-y p-4 text-base leading-relaxed"
        />
        <div className="absolute bottom-2 right-2 text-xs text-muted-foreground">
          {content.length}/{MAX_CHARS}
        </div>
      </div>

<div className="flex flex-wrap items-center gap-2">
        <Button variant="outline" onClick={() => setShowAttachments(!showAttachments)} className="gap-1">
          <Paperclip className="h-4 w-4" />
          Attachments
        </Button>

<Button variant="outline" onClick={() => setShowAI(!showAI)}>
          AI Assistant
        </Button>

<div className="ml-auto text-xs text-muted-foreground">
          Press <kbd className="rounded border bg-muted px-1 font-mono">⌘S</kbd> to save
        </div>
      </div>

{showAttachments && (
        <div className="rounded-md border p-4">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-medium">Attachments</h3>
            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setShowAttachments(false)}>
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </div>
          <FileUploader />
        </div>
      )}

{showAI && (
        <div className="rounded-md border p-4">
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-medium">AI Assistant</h3>
            <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => setShowAI(false)}>
              <X className="h-4 w-4" />
              <span className="sr-only">Close</span>
            </Button>
          </div>
          <AIModelSelector onGenerate={handleAIGenerate} isGenerating={isGenerating} />
        </div>
      )}

<ExportDialog
        open={isExportDialogOpen}
        onOpenChange={setIsExportDialogOpen}
        title="Journal"
        content={content}
        type="journal"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/journals/[id]/page.tsx" isEdit="true"
"use client"

import { useEffect, useState } from "react"
import { useParams, useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"
import { JournalEditor } from "@/components/journal-editor"
import { getJournalById, updateJournal } from "@/lib/data"
import type { Journal, Tag } from "@/lib/types"
import { Skeleton } from "@/components/ui/skeleton"

export default function JournalPage() {
  const params = useParams()
  const router = useRouter()
  const { toast } = useToast()
  const [journal, setJournal] = useState<Journal | null>(null)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    async function fetchJournal() {
      if (params.id) {
        const journalId = Array.isArray(params.id) ? params.id[0] : params.id

if (journalId === "new") {
          // Handle new journal creation
          router.push("/journals/new")
          return
        }

const fetchedJournal = await getJournalById(journalId)

if (fetchedJournal) {
          setJournal(fetchedJournal)
        } else {
          toast({
            title: "Journal not found",
            description: "The journal you're looking for doesn't exist.",
            variant: "destructive",
          })
          router.push("/")
        }
        setLoading(false)
      }
    }

fetchJournal()
  }, [params.id, router, toast])

const handleSave = async (content: string) => {
    if (journal) {
      const updatedJournal = await updateJournal(journal.id, content)

if (updatedJournal) {
        setJournal(updatedJournal)
        toast({
          title: "Journal saved",
          description: "Your journal has been saved successfully.",
        })
      } else {
        toast({
          title: "Error saving journal",
          description: "There was an error saving your journal.",
          variant: "destructive",
        })
      }
    }
  }

const handleTagsChange = (tags: Tag[]) => {
    if (journal) {
      setJournal({
        ...journal,
        tags,
      })
    }
  }

if (loading) {
    return (
      <div className="container mx-auto p-6 space-y-4">
        <Skeleton className="h-10 w-1/3" />
        <Skeleton className="h-64 w-full" />
      </div>
    )
  }

if (!journal) return null

return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">{journal.title}</h1>
      <JournalEditor
        journalId={journal.id}
        initialContent={journal.content}
        initialTags={journal.tags}
        onSave={handleSave}
        onTagsChange={handleTagsChange}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/journals/new/page.tsx"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { useToast } from "@/hooks/use-toast"
import { createJournal } from "@/lib/data"

export default function NewJournalPage() {
  const [title, setTitle] = useState("")
  const [isCreating, setIsCreating] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const handleCreate = async () => {
    if (!title.trim()) {
      toast({
        title: "Title required",
        description: "Please enter a title for your journal.",
        variant: "destructive",
      })
      return
    }

setIsCreating(true)

try {
      const newJournal = await createJournal(title)

if (newJournal) {
        toast({
          title: "Journal created",
          description: "Your new journal has been created.",
        })
        router.push(`/journals/${newJournal.id}`)
      } else {
        throw new Error("Failed to create journal")
      }
    } catch (error) {
      console.error("Error creating journal:", error)
      toast({
        title: "Error creating journal",
        description: "There was an error creating your journal.",
        variant: "destructive",
      })
    } finally {
      setIsCreating(false)
    }
  }

return (
    <div className="container mx-auto p-6 flex items-center justify-center">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create New Journal</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="title" className="text-sm font-medium">
                Journal Title
              </label>
              <Input
                id="title"
                placeholder="Enter journal title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    handleCreate()
                  }
                }}
              />
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => router.push("/")}>
            Cancel
          </Button>
          <Button onClick={handleCreate} disabled={isCreating || !title.trim()}>
            {isCreating ? "Creating..." : "Create Journal"}
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/spaces/new/page.tsx"
"use client"

export default function NewSpacePage() {
  const [name, setName] = useState("")
  const [isCreating, setIsCreating] = useState(false)
  const router = useRouter()
  const { toast } = useToast()

const handleCreate = async () => {
    if (!name.trim()) {
      toast({
        title: "Name required",
        description: "Please enter a name for your space.",
        variant: "destructive",
      })
      return
    }

setIsCreating(true)

try {
      const newSpace = await createSpace(name)

if (newSpace) {
        toast({
          title: "Space created",
          description: "Your new space has been created.",
        })
        router.push(`/spaces/${newSpace.id}`)
      } else {
        throw new Error("Failed to create space")
      }
    } catch (error) {
      console.error("Error creating space:", error)
      toast({
        title: "Error creating space",
        description: "There was an error creating your space.",
        variant: "destructive",
      })
    } finally {
      setIsCreating(false)
    }
  }

return (
    <div className="container mx-auto p-6 flex items-center justify-center">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create New Space</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="space-y-2">
              <label htmlFor="name" className="text-sm font-medium">
                Space Name
              </label>
              <Input
                id="name"
                placeholder="Enter space name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter") {
                    handleCreate()
                  }
                }}
              />
            </div>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" onClick={() => router.push("/")}>
            Cancel
          </Button>
          <Button onClick={handleCreate} disabled={isCreating || !name.trim()}>
            {isCreating ? "Creating..." : "Create Space"}
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { AppSidebar } from "@/components/app-sidebar"
import { SidebarProvider } from "@/components/ui/sidebar"
import { SearchProvider } from "@/components/search-provider"
import { KeyboardShortcutsProvider } from "@/components/keyboard-shortcuts-provider"
import { KeyboardShortcutsDialog } from "@/components/keyboard-shortcuts-dialog"
import { Toaster } from "@/components/ui/toaster"
import { Suspense } from "react"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Knowledge Management App",
  description: "A knowledge management web application",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <Suspense>
            <KeyboardShortcutsProvider>
              <SearchProvider>
                <SidebarProvider>
                  <div className="flex min-h-screen">
                    <AppSidebar />
                    <main className="flex-1 overflow-auto">{children}</main>
                  </div>
                  <Toaster />
                  <KeyboardShortcutsDialog />
                </SidebarProvider>
              </SearchProvider>
            </KeyboardShortcutsProvider>
          </Suspense>
        </ThemeProvider>
      </body>
    </html>
  )
}</article></body></html>