[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [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/user-nav.tsx" isMerged="true" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function UserNav() { return (

Admin User

admin@example.com

Profile Settings Log out ) } [V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true" "use client" import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" const DropdownMenu = DropdownMenuPrimitive.Root const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger const DropdownMenuGroup = DropdownMenuPrimitive.Group const DropdownMenuPortal = DropdownMenuPrimitive.Portal const DropdownMenuSub = DropdownMenuPrimitive.Sub const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuSubTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, children, ...props }, ref) => ( {children} )) DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName const DropdownMenuSubContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName const DropdownMenuContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName const DropdownMenuItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName const DropdownMenuCheckboxItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, checked, ...props }, ref) => ( {children} )) DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName const DropdownMenuRadioItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName const DropdownMenuLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { inset?: boolean } >(({ className, inset, ...props }, ref) => ( )) DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName const DropdownMenuSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } DropdownMenuShortcut.displayName = "DropdownMenuShortcut" export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>

, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="app/dashboard/knowledge-base/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { ChevronRight, FileImage, FileText, Folder, MoreHorizontal, Plus, Search } from "lucide-react" export default function KnowledgeBasePage() { const [currentFolder, setCurrentFolder] = useState("Root") const [breadcrumbs, setBreadcrumbs] = useState(["Root"]) const navigateToFolder = (folderName: string) => { setCurrentFolder(folderName) setBreadcrumbs([...breadcrumbs, folderName]) } const navigateToBreadcrumb = (index: number) => { const newBreadcrumbs = breadcrumbs.slice(0, index + 1) setBreadcrumbs(newBreadcrumbs) setCurrentFolder(newBreadcrumbs[newBreadcrumbs.length - 1]) } return (

Knowledge Base

{breadcrumbs.map((crumb, index) => (

{index > 0 && }

))}

navigateToFolder("Documents")}>

Documents

12 files

Rename Move Delete navigateToFolder("Images")}>

Images

24 files

Rename Move Delete navigateToFolder("Videos")}>

Videos

8 files

Rename Move Delete navigateToFolder("Audio")}>

Audio

15 files

Rename Move Delete

product_manual.pdf

PDF • 2.4 MB

Download Rename Move Delete

company_logo.png

PNG • 1.2 MB

Download Rename Move Delete

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="app/dashboard/upload/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { FileAudio, FileImage, FileText, FileVideo, Upload } from "lucide-react" export default function UploadPage() { const [selectedFiles, setSelectedFiles] = useState([]) const [uploading, setUploading] = useState(false) const [uploadProgress, setUploadProgress] = useState(0) const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files) { const filesArray = Array.from(e.target.files) setSelectedFiles(filesArray) } } const handleUpload = () => { if (selectedFiles.length === 0) return setUploading(true) // Simulate upload progress let progress = 0 const interval = setInterval(() => { progress += 5 setUploadProgress(progress) if (progress >= 100) { clearInterval(interval) setUploading(false) // Reset after completion setTimeout(() => { setSelectedFiles([]) setUploadProgress(0) }, 1000) } }, 200) } const getFileIcon = (file: File) => { const type = file.type.split("/")[0] switch (type) { case "image": return case "video": return case "audio": return default: return } } return (

Upload Files

Upload Files Batch Import Upload Files Upload individual files to your knowledge base

Destination Folder

File

Drag and drop files here or click to browse

{selectedFiles.length > 0 && (

Selected Files

{selectedFiles.map((file, index) => (

{getFileIcon(file)}

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

))}

)} {uploading && (

Upload Progress {uploadProgress}%

)} Batch Import Import multiple files at once to your knowledge base

Destination Folder

Files

Drag and drop multiple files here or click to browse

Supports images, audio, video, and text files

{selectedFiles.length > 0 && (

Selected Files ({selectedFiles.length})

{selectedFiles.map((file, index) => (

{getFileIcon(file)}

{file.name}

{(file.size / 1024 / 1024).toFixed(2)} MB

))}

)}

Vectorization Options

{uploading && (

Upload Progress {uploadProgress}%

)}

) } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="app/dashboard/ai-chat/page.tsx" isMerged="true" "use client" import { SelectItem } from "@/components/ui/select" import { SelectContent } from "@/components/ui/select" import { SelectValue } from "@/components/ui/select" import { SelectTrigger } from "@/components/ui/select" import { Select } from "@/components/ui/select" import { Label } from "@/components/ui/label" import { useState } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Bot, Send, User } from "lucide-react" type Message = { role: "user" | "assistant" content: string } export default function AIChatPage() { const [messages, setMessages] = useState([ { role: "assistant", content: "Hello! I'm your enterprise knowledge base assistant. How can I help you today?", }, ]) const [input, setInput] = useState("") const [loading, setLoading] = useState(false) const handleSendMessage = () => { if (!input.trim()) return // Add user message const userMessage: Message = { role: "user", content: input } setMessages([...messages, userMessage]) setInput("") setLoading(true) // Simulate AI response setTimeout(() => { const aiMessage: Message = { role: "assistant", content: "I've found some information in your knowledge base that might help with your query. Based on the documents I've analyzed, here's what I can tell you...", } setMessages((prev) => [...prev, aiMessage]) setLoading(false) }, 1500) } return (

AI Chat

Chat Settings

{messages.map((message, index) => (

{message.role === "user" ? ( <> ) : ( <> )}

{message.content}

))} {loading && (

)}

setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } }} />

AI Chat Settings Configure how the AI interacts with your knowledge base

AI Model

Knowledge Base Scope

Temperature

Precise Creative

) } [V0_FILE]typescriptreact:file="app/dashboard/api/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { Copy, Key, RefreshCw } from "lucide-react" export default function ApiPage() { const [apiKey, setApiKey] = useState("sk_live_31fakeapikey492fkdjsafkdjsa") const [copied, setCopied] = useState(false) const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text) setCopied(true) setTimeout(() => setCopied(false), 2000) } const regenerateApiKey = () => { setApiKey(`sk_live_${Math.random().toString(36).substring(2, 15)}`) } return (

API Access

API Keys Documentation Examples API Keys Manage your API keys for accessing the knowledge base

Your API Key

{copied &&

Copied to clipboard!

}

Keep your API key secure. Don't share it publicly.

Rate Limits Current API usage and rate limits

Queries per minute

60 requests per minute

12 / 60

Current usage

Queries per day

10,000 requests per day

1,245 / 10,000

Current usage

API Documentation Learn how to use the knowledge base API

Authentication

All API requests require authentication using your API key. Include it in the header of your requests.

                    {`Authorization: Bearer YOUR_API_KEY`}

Endpoints

Query Knowledge Base

Send a query to the knowledge base and get AI-generated answers.

                        
                          {`POST /api/query
Content-Type: application/json

{
  "query": "What is our return policy?",
  "max_results": 3
}`}

Search Documents

Search for documents in the knowledge base.

                        {`GET /api/search?q=product+manual&limit=10`}

Code Examples Example code snippets for using the API

JavaScript / Node.js

                    
                      {`// Query the knowledge base
const response = await fetch('https://api.yourcompany.com/api/query', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_API_KEY'
  },
  body: JSON.stringify({
    query: 'What is our return policy?',
    max_results: 3
  })
});

const data = await response.json();
console.log(data);`}

Python

                    
                      {`import requests

# Query the knowledge base
response = requests.post(
    'https://api.yourcompany.com/api/query',
    headers={
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_API_KEY'
    },
    json={
        'query': 'What is our return policy?',
        'max_results': 3
    }
)

data = response.json()
print(data)`}

Try the API Test the API directly from this page

Query

</div>
              <Button className="w-full">Send Query</Button>
              <div className="space-y-2">
                <Label>Response</Label>
                <div className="rounded-md bg-muted p-4 min-h-[100px]">
                  <p className="text-sm text-muted-foreground">Response will appear here...</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="app/dashboard/export/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Database, Download, FileDown } from "lucide-react"

export default function ExportPage() {
  const [exporting, setExporting] = useState(false)
  const [exportProgress, setExportProgress] = useState(0)

const handleExport = () => {
    setExporting(true)
    setExportProgress(0)

// Simulate export progress
    const interval = setInterval(() => {
      setExportProgress((prev) => {
        const newProgress = prev + 5
        if (newProgress >= 100) {
          clearInterval(interval)
          setTimeout(() => {
            setExporting(false)
          }, 500)
        }
        return newProgress
      })
    }, 200)
  }

return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Export Data</h1>
      </div>

<Tabs defaultValue="dataset" className="w-full">
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="dataset">Training Dataset</TabsTrigger>
          <TabsTrigger value="backup">Knowledge Base Backup</TabsTrigger>
        </TabsList>
        <TabsContent value="dataset" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Export Training Dataset</CardTitle>
              <CardDescription>Export your knowledge base data for training AI models</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="format">Export Format</Label>
                <Select defaultValue="jsonl">
                  <SelectTrigger id="format">
                    <SelectValue placeholder="Select format" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="jsonl">JSONL</SelectItem>
                    <SelectItem value="csv">CSV</SelectItem>
                    <SelectItem value="parquet">Parquet</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="content">Content to Include</Label>
                <div className="space-y-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="text" defaultChecked />
                    <label
                      htmlFor="text"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Text Documents
                    </label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="images" defaultChecked />
                    <label
                      htmlFor="images"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Images
                    </label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="audio" defaultChecked />
                    <label
                      htmlFor="audio"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Audio
                    </label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="video" defaultChecked />
                    <label
                      htmlFor="video"
                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                    >
                      Video
                    </label>
                  </div>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="vectorize">Include Vector Embeddings</Label>
                <div className="flex items-center space-x-2">
                  <Checkbox id="vectorize" defaultChecked />
                  <label
                    htmlFor="vectorize"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Export vector embeddings with data
                  </label>
                </div>
              </div>

{exporting && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>Export Progress</Label>
                    <span className="text-xs text-muted-foreground">{exportProgress}%</span>
                  </div>
                  <div className="w-full bg-muted rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: `${exportProgress}%` }}></div>
                  </div>
                </div>
              )}

<Button className="w-full" onClick={handleExport} disabled={exporting}>
                {exporting ? (
                  "Exporting..."
                ) : (
                  <>
                    <Download className="mr-2 h-4 w-4" />
                    Export Dataset
                  </>
                )}
              </Button>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Previous Exports</CardTitle>
              <CardDescription>Download your previously exported datasets</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <Database className="h-8 w-8 text-primary" />
                    <div>
                      <p className="text-sm font-medium">knowledge_base_dataset_20240301.jsonl</p>
                      <p className="text-xs text-muted-foreground">Exported on March 1, 2024 • 245 MB</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    <FileDown className="mr-2 h-4 w-4" />
                    Download
                  </Button>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <Database className="h-8 w-8 text-primary" />
                    <div>
                      <p className="text-sm font-medium">knowledge_base_dataset_20240215.jsonl</p>
                      <p className="text-xs text-muted-foreground">Exported on February 15, 2024 • 230 MB</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    <FileDown className="mr-2 h-4 w-4" />
                    Download
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="backup" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Knowledge Base Backup</CardTitle>
              <CardDescription>Create a complete backup of your knowledge base</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="backup-type">Backup Type</Label>
                <Select defaultValue="full">
                  <SelectTrigger id="backup-type">
                    <SelectValue placeholder="Select backup type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="full">Full Backup</SelectItem>
                    <SelectItem value="incremental">Incremental Backup</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <Label htmlFor="include-files">Include Files</Label>
                <div className="flex items-center space-x-2">
                  <Checkbox id="include-files" defaultChecked />
                  <label
                    htmlFor="include-files"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Include original files in backup
                  </label>
                </div>
              </div>
              <div className="space-y-2">
                <Label htmlFor="encryption">Encryption</Label>
                <div className="flex items-center space-x-2">
                  <Checkbox id="encryption" defaultChecked />
                  <label
                    htmlFor="encryption"
                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                  >
                    Encrypt backup with password
                  </label>
                </div>
              </div>

{exporting && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label>Backup Progress</Label>
                    <span className="text-xs text-muted-foreground">{exportProgress}%</span>
                  </div>
                  <div className="w-full bg-muted rounded-full h-2.5">
                    <div className="bg-primary h-2.5 rounded-full" style={{ width: `${exportProgress}%` }}></div>
                  </div>
                </div>
              )}

<Button className="w-full" onClick={handleExport} disabled={exporting}>
                {exporting ? (
                  "Creating Backup..."
                ) : (
                  <>
                    <Download className="mr-2 h-4 w-4" />
                    Create Backup
                  </>
                )}
              </Button>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Backup History</CardTitle>
              <CardDescription>View and restore previous backups</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <Database className="h-8 w-8 text-primary" />
                    <div>
                      <p className="text-sm font-medium">knowledge_base_backup_20240301.zip</p>
                      <p className="text-xs text-muted-foreground">Created on March 1, 2024 • 1.2 GB</p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      Restore
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="mr-2 h-4 w-4" />
                      Download
                    </Button>
                  </div>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-4">
                    <Database className="h-8 w-8 text-primary" />
                    <div>
                      <p className="text-sm font-medium">knowledge_base_backup_20240215.zip</p>
                      <p className="text-xs text-muted-foreground">Created on February 15, 2024 • 1.1 GB</p>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button variant="outline" size="sm">
                      Restore
                    </Button>
                    <Button variant="outline" size="sm">
                      <FileDown className="mr-2 h-4 w-4" />
                      Download
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }

[V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  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))",
        },
      },
      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")],
}

[V0_FILE]typescriptreact:file="contexts/language-context.tsx"
"use client"

import type React from "react"
import { createContext, useContext, useState, useEffect } from "react"

type Language = "en" | "zh"

type LanguageContextType = {
  language: Language
  setLanguage: (language: Language) => void
  t: (key: string) => string
}

const translations = {
  en: {
    // Common
    "app.name": "Enterprise Knowledge Base",
    "app.description": "Enterprise knowledge base management system with AI capabilities",

// Navigation
    "nav.dashboard": "Dashboard",
    "nav.knowledgeBase": "Knowledge Base",
    "nav.upload": "Upload",
    "nav.aiChat": "AI Chat",
    "nav.api": "API",
    "nav.export": "Export",
    "nav.settings": "Settings",

// Home page
    "home.title": "Enterprise Knowledge Management System",
    "home.subtitle":
      "Organize, vectorize, and leverage your enterprise data with AI-powered insights and structured outputs.",
    "home.getStarted": "Get Started",
    "home.tryAiChat": "Try AI Chat",

// Features
    "feature.folderClassification": "Folder Classification",
    "feature.folderClassification.desc": "Organize your knowledge with customizable folder structures",
    "feature.batchImport": "Batch Import",
    "feature.batchImport.desc": "Import images, audio, video, and text files in bulk",
    "feature.aiQA": "AI Q&A",
    "feature.aiQA.desc": "Get answers from your knowledge base using AI",
    "feature.apiExport": "API & Export",
    "feature.apiExport.desc": "Access structured data via API and export training datasets",

// Dashboard
    "dashboard.totalDocuments": "Total Documents",
    "dashboard.mediaFiles": "Media Files",
    "dashboard.aiQueries": "AI Queries",
    "dashboard.apiCalls": "API Calls",
    "dashboard.overview": "Overview",
    "dashboard.analytics": "Analytics",
    "dashboard.reports": "Reports",
    "dashboard.recentUploads": "Recent Uploads",
    "dashboard.popularQueries": "Popular AI Queries",
    "dashboard.quickActions": "Quick Actions",

// Knowledge Base
    "kb.title": "Knowledge Base",
    "kb.uploadFiles": "Upload Files",
    "kb.newFolder": "New Folder",

// Upload
    "upload.title": "Upload Files",
    "upload.destinationFolder": "Destination Folder",
    "upload.dragAndDrop": "Drag and drop files here or click to browse",
    "upload.browseFiles": "Browse Files",
    "upload.selectedFiles": "Selected Files",
    "upload.uploadProgress": "Upload Progress",
    "upload.uploadFiles": "Upload Files",
    "upload.uploading": "Uploading...",

// Batch Import
    "batch.title": "Batch Import",
    "batch.description": "Import multiple files at once to your knowledge base",
    "batch.dragAndDrop": "Drag and drop multiple files here or click to browse",
    "batch.supportedTypes": "Supports images, audio, video, and text files",
    "batch.clearAll": "Clear All",
    "batch.vectorizationOptions": "Vectorization Options",
    "batch.importing": "Importing...",
    "batch.importFiles": "Import Files",

// AI Chat
    "aiChat.title": "AI Chat",
    "aiChat.placeholder": "Ask a question about your knowledge base...",
    "aiChat.settings": "Settings",
    "aiChat.model": "AI Model",
    "aiChat.knowledgeScope": "Knowledge Base Scope",
    "aiChat.temperature": "Temperature",
    "aiChat.precise": "Precise",
    "aiChat.creative": "Creative",
    "aiChat.saveSettings": "Save Settings",

// API
    "api.title": "API Access",
    "api.keys": "API Keys",
    "api.docs": "Documentation",
    "api.examples": "Examples",
    "api.yourKey": "Your API Key",
    "api.regenerate": "Regenerate",
    "api.copied": "Copied to clipboard!",
    "api.secure": "Keep your API key secure. Don't share it publicly.",
    "api.rateLimits": "Rate Limits",
    "api.queriesPerMinute": "Queries per minute",
    "api.queriesPerDay": "Queries per day",
    "api.currentUsage": "Current usage",

// Export
    "export.title": "Export Data",
    "export.dataset": "Training Dataset",
    "export.backup": "Knowledge Base Backup",
    "export.format": "Export Format",
    "export.contentInclude": "Content to Include",
    "export.textDocuments": "Text Documents",
    "export.images": "Images",
    "export.audio": "Audio",
    "export.video": "Video",
    "export.vectorEmbeddings": "Include Vector Embeddings",
    "export.exportProgress": "Export Progress",
    "export.exporting": "Exporting...",
    "export.exportDataset": "Export Dataset",
    "export.previousExports": "Previous Exports",
    "export.backupType": "Backup Type",
    "export.includeFiles": "Include Files",
    "export.encryption": "Encryption",
    "export.creatingBackup": "Creating Backup...",
    "export.createBackup": "Create Backup",
    "export.backupHistory": "Backup History",
    "export.restore": "Restore",
    "export.download": "Download",

// Language
    language: "Language",
    "language.english": "English",
    "language.chinese": "Chinese",
  },
  zh: {
    // Common
    "app.name": "企业知识库",
    "app.description": "具有AI功能的企业知识库管理系统",

// Navigation
    "nav.dashboard": "仪表盘",
    "nav.knowledgeBase": "知识库",
    "nav.upload": "上传",
    "nav.aiChat": "AI对话",
    "nav.api": "API接口",
    "nav.export": "导出",
    "nav.settings": "设置",

// Home page
    "home.title": "企业知识管理系统",
    "home.subtitle": "通过AI驱动的洞察和结构化输出，组织、向量化和利用您的企业数据。",
    "home.getStarted": "开始使用",
    "home.tryAiChat": "尝试AI对话",

// Features
    "feature.folderClassification": "文件夹分类",
    "feature.folderClassification.desc": "使用可自定义的文件夹结构组织您的知识",
    "feature.batchImport": "批量导入",
    "feature.batchImport.desc": "批量导入图片、音频、视频和文本文件",
    "feature.aiQA": "AI问答",
    "feature.aiQA.desc": "使用AI从您的知识库获取答案",
    "feature.apiExport": "API和导出",
    "feature.apiExport.desc": "通过API访问结构化数据并导出训练数据集",

// Dashboard
    "dashboard.totalDocuments": "文档总数",
    "dashboard.mediaFiles": "媒体文件",
    "dashboard.aiQueries": "AI查询",
    "dashboard.apiCalls": "API调用",
    "dashboard.overview": "概览",
    "dashboard.analytics": "分析",
    "dashboard.reports": "报告",
    "dashboard.recentUploads": "最近上传",
    "dashboard.popularQueries": "热门AI查询",
    "dashboard.quickActions": "快速操作",

// Knowledge Base
    "kb.title": "知识库",
    "kb.uploadFiles": "上传文件",
    "kb.newFolder": "新建文件夹",

// Upload
    "upload.title": "上传文件",
    "upload.destinationFolder": "目标文件夹",
    "upload.dragAndDrop": "拖放文件到此处或点击浏览",
    "upload.browseFiles": "浏览文件",
    "upload.selectedFiles": "已选择的文件",
    "upload.uploadProgress": "上传进度",
    "upload.uploadFiles": "上传文件",
    "upload.uploading": "上传中...",

// Batch Import
    "batch.title": "批量导入",
    "batch.description": "一次导入多个文件到您的知识库",
    "batch.dragAndDrop": "拖放多个文件到此处或点击浏览",
    "batch.supportedTypes": "支持图片、音频、视频和文本文件",
    "batch.clearAll": "清除全部",
    "batch.vectorizationOptions": "向量化选项",
    "batch.importing": "导入中...",
    "batch.importFiles": "导入文件",

// AI Chat
    "aiChat.title": "AI对话",
    "aiChat.placeholder": "询问关于您知识库的问题...",
    "aiChat.settings": "设置",
    "aiChat.model": "AI模型",
    "aiChat.knowledgeScope": "知识库范围",
    "aiChat.temperature": "温度",
    "aiChat.precise": "精确",
    "aiChat.creative": "创意",
    "aiChat.saveSettings": "保存设置",

// API
    "api.title": "API访问",
    "api.keys": "API密钥",
    "api.docs": "文档",
    "api.examples": "示例",
    "api.yourKey": "您的API密钥",
    "api.regenerate": "重新生成",
    "api.copied": "已复制到剪贴板！",
    "api.secure": "保持您的API密钥安全。不要公开分享。",
    "api.rateLimits": "速率限制",
    "api.queriesPerMinute": "每分钟查询次数",
    "api.queriesPerDay": "每天查询次数",
    "api.currentUsage": "当前使用情况",

// Export
    "export.title": "导出数据",
    "export.dataset": "训练数据集",
    "export.backup": "知识库备份",
    "export.format": "导出格式",
    "export.contentInclude": "包含内容",
    "export.textDocuments": "文本文档",
    "export.images": "图片",
    "export.audio": "音频",
    "export.video": "视频",
    "export.vectorEmbeddings": "包含向量嵌入",
    "export.exportProgress": "导出进度",
    "export.exporting": "导出中...",
    "export.exportDataset": "导出数据集",
    "export.previousExports": "以前的导出",
    "export.backupType": "备份类型",
    "export.includeFiles": "包含文件",
    "export.encryption": "加密",
    "export.creatingBackup": "创建备份中...",
    "export.createBackup": "创建备份",
    "export.backupHistory": "备份历史",
    "export.restore": "恢复",
    "export.download": "下载",

// Language
    language: "语言",
    "language.english": "英文",
    "language.chinese": "中文",
  },
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [language, setLanguageState] = useState<Language>("en")

// Initialize language from localStorage if available
  useEffect(() => {
    const savedLanguage = localStorage.getItem("language") as Language
    if (savedLanguage && (savedLanguage === "en" || savedLanguage === "zh")) {
      setLanguageState(savedLanguage)
    }
  }, [])

const setLanguage = (newLanguage: Language) => {
    setLanguageState(newLanguage)
    localStorage.setItem("language", newLanguage)
  }

const t = (key: string): string => {
    return translations[language][key] || key
  }

return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="components/language-switcher.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Globe } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export function LanguageSwitcher() {
  const { language, setLanguage, t } = useLanguage()

return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Globe className="h-[1.2rem] w-[1.2rem]" />
          <span className="sr-only">{t("language")}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setLanguage("en")} className={language === "en" ? "bg-muted" : ""}>
          {t("language.english")}
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setLanguage("zh")} className={language === "zh" ? "bg-muted" : ""}>
          {t("language.chinese")}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="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 { LanguageProvider } from "@/contexts/language-context"

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

export const metadata: Metadata = {
  title: "Enterprise Knowledge Base",
  description: "Enterprise knowledge base management system with AI capabilities",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <LanguageProvider>{children}</LanguageProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/home-client.tsx"
"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Database, FileText, FolderTree, Image, MessageSquare, Upload } from "lucide-react"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useLanguage } from "@/contexts/language-context"

export default function HomeClient() {
  const { t } = useLanguage()

return (
    <div className="flex flex-col min-h-screen">
      <header className="border-b">
        <div className="container flex items-center justify-between h-16 px-4 md:px-6">
          <Link href="/" className="flex items-center gap-2 text-lg font-semibold">
            <Database className="w-5 h-5" />
            <span>{t("app.name")}</span>
          </Link>
          <nav className="hidden md:flex gap-6">
            <Link href="/dashboard" className="text-sm font-medium hover:underline underline-offset-4">
              {t("nav.dashboard")}
            </Link>
            <Link href="/dashboard/knowledge-base" className="text-sm font-medium hover:underline underline-offset-4">
              {t("nav.knowledgeBase")}
            </Link>
            <Link href="/dashboard/ai-chat" className="text-sm font-medium hover:underline underline-offset-4">
              {t("nav.aiChat")}
            </Link>
            <Link href="/dashboard/api" className="text-sm font-medium hover:underline underline-offset-4">
              {t("nav.api")}
            </Link>
          </nav>
          <div className="flex items-center gap-2">
            <LanguageSwitcher />
            <Link href="/dashboard">
              <Button>{t("home.getStarted")}</Button>
            </Link>
          </div>
        </div>
      </header>
      <main className="flex-1">
        <section className="w-full py-12 md:py-24 lg:py-32">
          <div className="container px-4 md:px-6">
            <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 xl:grid-cols-2">
              <div className="flex flex-col justify-center space-y-4">
                <div className="space-y-2">
                  <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl">
                    {t("home.title")}
                  </h1>
                  <p className="max-w-[600px] text-muted-foreground md:text-xl">{t("home.subtitle")}</p>
                </div>
                <div className="flex flex-col gap-2 min-[400px]:flex-row">
                  <Link href="/dashboard">
                    <Button size="lg">{t("home.getStarted")}</Button>
                  </Link>
                  <Link href="/dashboard/ai-chat">
                    <Button size="lg" variant="outline">
                      {t("home.tryAiChat")}
                    </Button>
                  </Link>
                </div>
              </div>
              <div className="flex items-center justify-center">
                <div className="grid grid-cols-2 gap-4 md:grid-cols-2">
                  <div className="flex flex-col items-center space-y-2 border rounded-lg p-4">
                    <FolderTree className="w-10 h-10 text-primary" />
                    <h3 className="text-xl font-bold">{t("feature.folderClassification")}</h3>
                    <p className="text-sm text-center text-muted-foreground">
                      {t("feature.folderClassification.desc")}
                    </p>
                  </div>
                  <div className="flex flex-col items-center space-y-2 border rounded-lg p-4">
                    <Upload className="w-10 h-10 text-primary" />
                    <h3 className="text-xl font-bold">{t("feature.batchImport")}</h3>
                    <p className="text-sm text-center text-muted-foreground">{t("feature.batchImport.desc")}</p>
                  </div>
                  <div className="flex flex-col items-center space-y-2 border rounded-lg p-4">
                    <MessageSquare className="w-10 h-10 text-primary" />
                    <h3 className="text-xl font-bold">{t("feature.aiQA")}</h3>
                    <p className="text-sm text-center text-muted-foreground">{t("feature.aiQA.desc")}</p>
                  </div>
                  <div className="flex flex-col items-center space-y-2 border rounded-lg p-4">
                    <FileText className="w-10 h-10 text-primary" />
                    <h3 className="text-xl font-bold">{t("feature.apiExport")}</h3>
                    <p className="text-sm text-center text-muted-foreground">{t("feature.apiExport.desc")}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section className="w-full py-12 md:py-24 lg:py-32 bg-muted">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col items-center justify-center space-y-4 text-center">
              <div className="space-y-2">
                <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">Key Features</h2>
                <p className="max-w-[900px] text-muted-foreground md:text-xl">
                  Our enterprise knowledge base system provides powerful tools for managing and leveraging your
                  organization's data.
                </p>
              </div>
            </div>
            <div className="grid grid-cols-1 gap-6 mt-8 md:grid-cols-3">
              <div className="flex flex-col items-center space-y-2 border rounded-lg p-6 bg-background">
                <div className="p-2 bg-primary/10 rounded-full">
                  <Image className="w-10 h-10 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Multi-Media Support</h3>
                <p className="text-sm text-center text-muted-foreground">
                  Import and manage images, audio, video, and text files in your knowledge base
                </p>
              </div>
              <div className="flex flex-col items-center space-y-2 border rounded-lg p-6 bg-background">
                <div className="p-2 bg-primary/10 rounded-full">
                  <Database className="w-10 h-10 text-primary" />
                </div>
                <h3 className="text-xl font-bold">Automatic Vectorization</h3>
                <p className="text-sm text-center text-muted-foreground">
                  All imported data is automatically vectorized for AI-powered search and retrieval
                </p>
              </div>
              <div className="flex flex-col items-center space-y-2 border rounded-lg p-6 bg-background">
                <div className="p-2 bg-primary/10 rounded-full">
                  <MessageSquare className="w-10 h-10 text-primary" />
                </div>
                <h3 className="text-xl font-bold">AI-Powered Q&A</h3>
                <p className="text-sm text-center text-muted-foreground">
                  Ask questions and get accurate answers based on your enterprise knowledge
                </p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <footer className="border-t">
        <div className="container flex flex-col gap-2 px-4 py-6 md:flex-row md:items-center md:gap-4 md:px-6">
          <p className="text-xs text-muted-foreground md:text-sm">{t("footer.rights")}</p>
          <nav className="flex gap-4 md:ml-auto">
            <Link href="#" className="text-xs hover:underline underline-offset-4 md:text-sm">
              {t("footer.terms")}
            </Link>
            <Link href="#" className="text-xs hover:underline underline-offset-4 md:text-sm">
              {t("footer.privacy")}
            </Link>
          </nav>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import HomeClient from "./home-client"

export default function Home() {
  return <HomeClient />
}

[V0_FILE]typescriptreact:file="app/dashboard/layout-client.tsx"
"use client"

import type React from "react"

import Link from "next/link"
import { Database, FileText, FolderTree, LayoutDashboard, MessageSquare, Settings, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import { ModeToggle } from "@/components/mode-toggle"
import { UserNav } from "@/components/user-nav"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useLanguage } from "@/contexts/language-context"

export default function DashboardLayoutClient({ children }: { children: React.ReactNode }) {
  const { t } = useLanguage()

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-6">
        <Link href="/" className="flex items-center gap-2 font-semibold">
          <Database className="h-6 w-6" />
          <span className="hidden md:inline">{t("app.name")}</span>
        </Link>
        <nav className="hidden md:flex flex-1 items-center gap-6 text-sm">
          <Link href="/dashboard" className="font-medium transition-colors hover:text-primary">
            {t("nav.dashboard")}
          </Link>
          <Link href="/dashboard/knowledge-base" className="font-medium transition-colors hover:text-primary">
            {t("nav.knowledgeBase")}
          </Link>
          <Link href="/dashboard/ai-chat" className="font-medium transition-colors hover:text-primary">
            {t("nav.aiChat")}
          </Link>
          <Link href="/dashboard/api" className="font-medium transition-colors hover:text-primary">
            {t("nav.api")}
          </Link>
          <Link href="/dashboard/export" className="font-medium transition-colors hover:text-primary">
            {t("nav.export")}
          </Link>
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <LanguageSwitcher />
          <ModeToggle />
          <UserNav />
        </div>
      </header>
      <div className="flex flex-1">
        <aside className="hidden w-64 border-r bg-muted/40 md:block">
          <nav className="grid gap-2 p-4 text-sm">
            <Link href="/dashboard">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <LayoutDashboard className="h-4 w-4" />
                {t("nav.dashboard")}
              </Button>
            </Link>
            <Link href="/dashboard/knowledge-base">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FolderTree className="h-4 w-4" />
                {t("nav.knowledgeBase")}
              </Button>
            </Link>
            <Link href="/dashboard/upload">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Upload className="h-4 w-4" />
                {t("nav.upload")}
              </Button>
            </Link>
            <Link href="/dashboard/ai-chat">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <MessageSquare className="h-4 w-4" />
                {t("nav.aiChat")}
              </Button>
            </Link>
            <Link href="/dashboard/api">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <FileText className="h-4 w-4" />
                {t("nav.api")}
              </Button>
            </Link>
            <Link href="/dashboard/export">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Database className="h-4 w-4" />
                {t("nav.export")}
              </Button>
            </Link>
            <Link href="/dashboard/settings">
              <Button variant="ghost" className="w-full justify-start gap-2">
                <Settings className="h-4 w-4" />
                {t("nav.settings")}
              </Button>
            </Link>
          </nav>
        </aside>
        <main className="flex-1 p-6">{children}</main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import type React from "react"
import type { Metadata } from "next"
import DashboardLayoutClient from "./layout-client"

export const metadata: Metadata = {
  title: "Dashboard - Enterprise Knowledge Base",
  description: "Manage your enterprise knowledge base",
}

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <DashboardLayoutClient>{children}</DashboardLayoutClient>
}

[V0_FILE]typescriptreact:file="app/dashboard/dashboard-client.tsx"
"use client"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Database, FileText, Image, MessageSquare } from "lucide-react"
import { useLanguage } from "@/contexts/language-context"

export default function DashboardClient() {
  const { t } = useLanguage()

return (
    <div className="flex flex-col gap-4">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("dashboard.totalDocuments")}</CardTitle>
            <FileText className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">1,254</div>
            <p className="text-xs text-muted-foreground">+24 from last month</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("dashboard.mediaFiles")}</CardTitle>
            <Image className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">432</div>
            <p className="text-xs text-muted-foreground">+12 from last month</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("dashboard.aiQueries")}</CardTitle>
            <MessageSquare className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">2,543</div>
            <p className="text-xs text-muted-foreground">+573 from last month</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">{t("dashboard.apiCalls")}</CardTitle>
            <Database className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12,234</div>
            <p className="text-xs text-muted-foreground">+2,345 from last month</p>
          </CardContent>
        </Card>
      </div>
      <Tabs defaultValue="overview" className="space-y-4">
        <TabsList>
          <TabsTrigger value="overview">{t("dashboard.overview")}</TabsTrigger>
          <TabsTrigger value="analytics">{t("dashboard.analytics")}</TabsTrigger>
          <TabsTrigger value="reports">{t("dashboard.reports")}</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            <Card>
              <CardHeader>
                <CardTitle>{t("dashboard.recentUploads")}</CardTitle>
                <CardDescription>Recently uploaded files to your knowledge base</CardDescription>
              </CardHeader>
              <CardContent>{/* Content remains the same */}</CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>{t("dashboard.popularQueries")}</CardTitle>
                <CardDescription>Most frequently asked questions</CardDescription>
              </CardHeader>
              <CardContent>{/* Content remains the same */}</CardContent>
            </Card>
            <Card className="col-span-full md:col-span-1">
              <CardHeader>
                <CardTitle>{t("dashboard.quickActions")}</CardTitle>
                <CardDescription>Common tasks and operations</CardDescription>
              </CardHeader>
              <CardContent>{/* Content remains the same */}</CardContent>
            </Card>
          </div>
        </TabsContent>
        {/* Other tabs content remains the same */}
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
import DashboardClient from "./dashboard-client"

export default function DashboardPage() {
  return <DashboardClient />
}

[V0_FILE]typescriptreact:file="app/dashboard/metadata-client.tsx"
"use client"

import { useLanguage } from "@/contexts/language-context"
import { useEffect, useState } from "react"

export function useMetadata() {
  const { t } = useLanguage()
  const [metadata, setMetadata] = useState({
    title: "",
    description: "",
  })

useEffect(() => {
    setMetadata({
      title: `${t("nav.dashboard")} - ${t("app.name")}`,
      description: t("app.description"),
    })
  }, [t])

return metadata
}
</article></body></html>