[V0_FILE]typescriptreact:file="components/menu-bar.tsx" "use client" import type * as React from "react" import { motion } from "framer-motion" import { Home, Settings, Bell, User } from "lucide-react" import { useTheme } from "next-themes" interface MenuItem { icon: React.ReactNode label: string href: string gradient: string iconColor: string } const menuItems: MenuItem[] = [ { icon: , label: "Home", href: "#", gradient: "radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)", iconColor: "text-blue-500", }, { icon: , label: "Notifications", href: "#", gradient: "radial-gradient(circle, rgba(249,115,22,0.15) 0%, rgba(234,88,12,0.06) 50%, rgba(194,65,12,0) 100%)", iconColor: "text-orange-500", }, { icon: , label: "Settings", href: "#", gradient: "radial-gradient(circle, rgba(34,197,94,0.15) 0%, rgba(22,163,74,0.06) 50%, rgba(21,128,61,0) 100%)", iconColor: "text-green-500", }, { icon: , label: "Profile", href: "#", gradient: "radial-gradient(circle, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.06) 50%, rgba(185,28,28,0) 100%)", iconColor: "text-red-500", }, ] const itemVariants = { initial: { rotateX: 0, opacity: 1 }, hover: { rotateX: -90, opacity: 0 }, } const backVariants = { initial: { rotateX: 90, opacity: 0 }, hover: { rotateX: 0, opacity: 1 }, } const glowVariants = { initial: { opacity: 0, scale: 0.8 }, hover: { opacity: 1, scale: 2, transition: { opacity: { duration: 0.5, ease: [0.4, 0, 0.2, 1] }, scale: { duration: 0.5, type: "spring", stiffness: 300, damping: 25 }, }, }, } const navGlowVariants = { initial: { opacity: 0 }, hover: { opacity: 1, transition: { duration: 0.5, ease: [0.4, 0, 0.2, 1], }, }, } const sharedTransition = { type: "spring", stiffness: 100, damping: 20, duration: 0.5, } export function MenuBar() { const { theme } = useTheme() const isDarkTheme = theme === "dark" return (

{item.icon} {item.label} {item.icon} {item.label}

) } [V0_FILE]plaintext:file="public/sounds/piano.mp3" query="piano note sound effect" [V0_FILE]plaintext:file="public/sounds/guitar.mp3" query="guitar strum sound effect" [V0_FILE]plaintext:file="public/sounds/drum.mp3" query="drum hit sound effect" [V0_FILE]typescriptreact:file="components/search-bar.tsx" "use client" import * as React from "react" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Search } from 'lucide-react' export function SearchBar() { const [searchTerm, setSearchTerm] = React.useState("") const handleSearch = (e: React.FormEvent) => { e.preventDefault() if (searchTerm.trim()) { window.location.href = `https://www.google.com/search?q=${encodeURIComponent(searchTerm.trim())}` } } return ( ) } [V0_FILE]typescriptreact:file="components/shortcut-icon.tsx" "use client" import * as React from "react" import { getDomainFromUrl } from "@/lib/utils" import { Globe } from 'lucide-react' // Icon for generic fallback import Image from "next/image" interface ShortcutIconProps { name: string url: string } export function ShortcutIcon({ name, url }: ShortcutIconProps) { const [imageError, setImageError] = React.useState(false) const domain = getDomainFromUrl(url) const faviconUrl = domain ? `https://www.google.com/s2/favicons?domain=${domain}&sz=64` : null // Reset error state if URL or name changes React.useEffect(() => { setImageError(false) }, [url, name]) if (faviconUrl && !imageError) { return ( {`${name}

setImageError(true)} /> ) } // Fallback to first letter or generic icon return (

{name ? name.charAt(0).toUpperCase() : }

) } [V0_FILE]typescriptreact:file="app/globals.css" @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: 222.2 47.4% 11.2%; --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: 222.2 84% 4.9%; --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: 210 40% 98%; --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: 212.7 26.8% 83.9%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @layer utilities { .backface-hidden { backface-visibility: hidden; } } /* Add smooth transition for theme changes */ * { transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } [V0_FILE]typescriptreact:file="hooks/use-local-storage.ts" "use client" import { useState, useEffect, useCallback } from "react" type SetValue = (value: T | ((prevValue: T) => T)) => void export function useLocalStorage(key: string, initialValue: T): [T, SetValue] { // State to store our value // Pass initial state function to useState so logic is only executed once const [storedValue, setStoredValue] = useState(() => { if (typeof window === "undefined") { return initialValue } try { // Get from local storage by key const item = window.localStorage.getItem(key) // Parse stored json or if none return initialValue return item ? JSON.parse(item) : initialValue } catch (error) { // If error also return initialValue console.error(`Error reading localStorage key “${key}”:`, error) return initialValue } }) // Return a wrapped version of useState's setter function that persists the new value to localStorage. const setValue: SetValue = useCallback((value) => { try { // Allow value to be a function so we have same API as useState const valueToStore = value instanceof Function ? value(storedValue) : value // Save state setStoredValue(valueToStore) // Save to local storage if (typeof window !== "undefined") { window.localStorage.setItem(key, JSON.stringify(valueToStore)) } } catch (error) { // A more advanced implementation would handle the error case console.error(`Error setting localStorage key “${key}”:`, error) } }, [key, storedValue]) // Ensure the value is updated if localStorage changes from another tab/window useEffect(() => { const handleStorageChange = (event: StorageEvent) => { if (event.key === key && event.newValue !== null) { try { setStoredValue(JSON.parse(event.newValue)) } catch (error) { console.error(`Error parsing localStorage change for key “${key}”:`, error) } } } if (typeof window !== "undefined") { window.addEventListener("storage", handleStorageChange) } return () => { if (typeof window !== "undefined") { window.removeEventListener("storage", handleStorageChange) } } }, [key]) return [storedValue, setValue] } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" import { NewTabDashboard } from "@/components/new-tab-dashboard" export default function Page() { return (

{/* ThemeToggle and BackgroundSetter are now handled within NewTabDashboard's layout */}

) } [V0_FILE]plaintext:file=".env.local" YOUTUBE_API_KEY="AIzaSyDpgeJwN3jN9PXf9fNEownPBtriEMcUSsM" [V0_FILE]typescript:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } export function ensureProtocol(url: string): string { if (!url.startsWith("http://") && !url.startsWith("https://")) { return `https://${url}`; } return url; } export function getYouTubeVideoId(url: string): string | null { const regExp = /(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|v\/|)([\w-]{11})(?:\S+)?/ const match = url.match(regExp) return (match && match[1].length === 11) ? match[1] : null } export function getYouTubePlaylistId(url: string): string | null { const regExp = /[?&]list=([^&#]*)/; const match = url.match(regExp); return match ? match[1] : null; } // Cập nhật hàm để nhận dạng các định danh kênh YouTube khác nhau export function getYouTubeChannelIdentifier(input: string): { type: 'id' | 'handle' | 'username' | null; value: string | null } { // 1. Thử phân tích dưới dạng URL đầy đủ trước try { const urlObj = new URL(input); const path = urlObj.pathname; // Khớp ID kênh: youtube.com/channel/UC_ID const channelIdRegExp = /\/channel\/([\w-]{24})/; let match = path.match(channelIdRegExp); if (match && match[1].length === 24 && match[1].startsWith('UC')) { return { type: 'id', value: match[1] }; } // Khớp handle: youtube.com/@HANDLE const handleRegExp = /\/@([\w-]+)/; match = path.match(handleRegExp); if (match) { return { type: 'handle', value: `@${match[1]}` }; } // Khớp tên người dùng cũ hoặc URL tùy chỉnh: youtube.com/user/USERNAME hoặc youtube.com/c/CUSTOM_URL const usernameOrCustomUrlRegExp = /\/(?:user|c)\/([\w-]+)/; match = path.match(usernameOrCustomUrlRegExp); if (match) { return { type: 'username', value: match[1] }; } } catch (e) { // Không phải URL hợp lệ, tiếp tục kiểm tra các định danh độc lập } // 2. Nếu không phải URL đầy đủ, thử phân tích dưới dạng ID, handle hoặc tên người dùng độc lập // Kiểm tra ID kênh (24 ký tự, bắt đầu bằng UC) if (input.length === 24 && input.startsWith('UC')) { return { type: 'id', value: input }; } // Kiểm tra handle (bắt đầu bằng @) if (input.startsWith('@') && input.length > 1) { return { type: 'handle', value: input }; } // Giả định đó là tên người dùng/URL tùy chỉnh nếu không khớp các mẫu khác và không trống // Cần thận trọng với trường hợp này vì nó có thể khớp sai if (input.trim().length > 0) { return { type: 'username', value: input }; } return { type: null, value: null }; } export function getDomainFromUrl(url: string): string | null { try { const urlObj = new URL(url); return urlObj.hostname; } catch (error) { console.error("Invalid URL:", url, error); return null; } } [V0_FILE]typescript:file="app/api/youtube-videos/route.ts" import { NextResponse } from 'next/server'; import { getYouTubeChannelIdentifier } from '@/lib/utils'; // Import the new utility export async function GET(request: Request) { const { searchParams } = new URL(request.url); const playlistId = searchParams.get('playlistId'); const channelIdentifierParam = searchParams.get('channelId'); // Renamed for clarity const searchTerm = searchParams.get('searchTerm'); const apiKey = process.env.YOUTUBE_API_KEY; if (!apiKey) { return NextResponse.json({ error: 'YouTube API key not configured.' }, { status: 500 }); } let apiUrl = ''; let resolvedChannelId: string | null = null; if (playlistId) { apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${playlistId}&key=${apiKey}`; } else if (channelIdentifierParam) { const identifier = getYouTubeChannelIdentifier(channelIdentifierParam); if (identifier.type === 'id') { resolvedChannelId = identifier.value; } else if (identifier.type === 'handle' || identifier.type === 'username') { // Resolve channel ID from handle or username let channelLookupUrl = ''; if (identifier.type === 'handle') { // For handles, remove the '@' prefix for the API request channelLookupUrl = `https://www.googleapis.com/youtube/v3/channels?part=id&forHandle=${encodeURIComponent(identifier.value.substring(1))}&key=${apiKey}`; } else { // username channelLookupUrl = `https://www.googleapis.com/youtube/v3/channels?part=id&forUsername=${encodeURIComponent(identifier.value)}&key=${apiKey}`; } try { const lookupRes = await fetch(channelLookupUrl); const lookupData = await lookupRes.json(); if (lookupData.items && lookupData.items.length > 0) { resolvedChannelId = lookupData.items[0].id; } else { return NextResponse.json({ error: `Không tìm thấy kênh cho định danh: ${identifier.value}` }, { status: 404 }); } } catch (err) { console.error('YouTube Channel Lookup API Error:', err); return NextResponse.json({ error: 'Không thể giải quyết định danh kênh.' }, { status: 500 }); } } else { // If it's not a recognized channel identifier format, treat it as an invalid input return NextResponse.json({ error: 'Định dạng URL hoặc ID kênh YouTube không hợp lệ.' }, { status: 400 }); } if (resolvedChannelId) { // Now that we have the UC... channel ID, proceed as before const channelRes = await fetch(`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${resolvedChannelId}&key=${apiKey}`); const channelData = await channelRes.json(); const uploadsPlaylistId = channelData.items?.[0]?.contentDetails?.relatedPlaylists?.uploads; if (!uploadsPlaylistId) { return NextResponse.json({ error: 'Không tìm thấy danh sách tải lên cho kênh này.' }, { status: 404 }); } apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${uploadsPlaylistId}&key=${apiKey}`; } else { return NextResponse.json({ error: 'ID kênh không thể được giải quyết.' }, { status: 400 }); } } else if (searchTerm) { apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=20&q=${encodeURIComponent(searchTerm)}&key=${apiKey}`; } else { return NextResponse.json({ error: 'Thiếu playlistId, channelId, hoặc searchTerm.' }, { status: 400 }); } try { const response = await fetch(apiUrl); const data = await response.json(); if (data.error) { console.error('YouTube API Error:', data.error); return NextResponse.json({ error: data.error.message || 'Không thể tìm nạp video YouTube.' }, { status: data.error.code || 500 }); } const videos = data.items .filter((item: any) => item.id?.videoId || item.snippet?.resourceId?.videoId) .map((item: any) => ({ id: item.id?.videoId || item.snippet.resourceId.videoId, title: item.snippet.title, thumbnail: item.snippet.thumbnails?.maxres?.url || item.snippet.thumbnails?.high?.url || item.snippet.thumbnails?.medium?.url, })); return NextResponse.json({ videos }); } catch (error) { console.error('Lỗi máy chủ khi tìm nạp video YouTube:', error); return NextResponse.json({ error: 'Lỗi máy chủ nội bộ.' }, { status: 500 }); } } [V0_FILE]typescriptreact:file="components/player-info.tsx" "use client" import * as React from "react" import { motion } from "framer-motion" import { Play, Pause, VolumeX, Volume2, Maximize2, Minimize2, SkipForward } from 'lucide-react' import { Button } from "@/components/ui/button" import Image from "next/image" interface PlayerInfoProps { videoTitle: string videoThumbnail: string isPlaying: boolean isMuted: boolean showFullPlayer: boolean onTogglePlayPause: () => void onToggleMute: () => void onToggleFullPlayer: () => void onNextVideo?: () => void showNextButton: boolean } export function PlayerInfo({ videoTitle, videoThumbnail, isPlaying, isMuted, showFullPlayer, onTogglePlayPause, onToggleMute, onToggleFullPlayer, onNextVideo, showNextButton, }: PlayerInfoProps) { return (

{videoTitle || "Đang tải video..."}

{showNextButton && onNextVideo && ( )}

) } export default PlayerInfo [V0_FILE]typescriptreact:file="components/click-effect-provider.tsx" "use client" import * as React from "react" import { useState, useEffect, useCallback, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" interface NoteEffect { id: string x: number y: number icon: string color: string } const noteIcons = ["♪", "♫", "♬", "♩"] const noteColors = ["text-blue-400", "text-green-400", "text-purple-400", "text-yellow-400", "text-red-400"] export function ClickEffectProvider({ children }: { children: React.ReactNode }) { const [notes, setNotes] = useState([]) const audioCtxRef = useRef(null) // Create or resume AudioContext in response to user interaction const ensureAudioContext = useCallback(async () => { if (typeof window === "undefined") return null try { if (!audioCtxRef.current) { const Ctx = (window as any).AudioContext || (window as any).webkitAudioContext if (!Ctx) return null audioCtxRef.current = new Ctx() } if (audioCtxRef.current.state === "suspended") { await audioCtxRef.current.resume() } return audioCtxRef.current } catch (e) { console.error("AudioContext init/resume failed:", e) return null } }, []) const playClickSound = useCallback(async () => { const ctx = await ensureAudioContext() if (!ctx) return const now = ctx.currentTime const osc = ctx.createOscillator() const gain = ctx.createGain() // Random pleasant tone (C5, E5, G5, A5) const freqs = [523.25, 659.25, 783.99, 880.0] osc.frequency.value = freqs[Math.floor(Math.random() * freqs.length)] osc.type = "sine" // Simple envelope to avoid clicks gain.gain.setValueAtTime(0, now) gain.gain.linearRampToValueAtTime(0.4, now + 0.01) gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.2) osc.connect(gain) gain.connect(ctx.destination) osc.start(now) osc.stop(now + 0.25) }, [ensureAudioContext]) const handleClick = useCallback( (event: MouseEvent) => { const newNote: NoteEffect = { id: Date.now().toString() + Math.random().toString(36).substring(2, 9), x: event.clientX, y: event.clientY, icon: noteIcons[Math.floor(Math.random() * noteIcons.length)], color: noteColors[Math.floor(Math.random() * noteColors.length)], } setNotes((prevNotes) => [...prevNotes, newNote]) // Play synthesized click sound (no external files) playClickSound().catch((e) => console.error("Error playing synthesized sound:", e)) // Remove note after animation setTimeout(() => { setNotes((prevNotes) => prevNotes.filter((note) => note.id !== newNote.id)) }, 1000) }, [playClickSound] ) useEffect(() => { document.addEventListener("click", handleClick) return () => { document.removeEventListener("click", handleClick) } }, [handleClick]) return ( <> {children} {notes.map((note) => ( ))} ) } [V0_FILE]typescriptreact:file="components/clock-widget.tsx" "use client" import * as React from "react" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" export function ClockWidget() { const [time, setTime] = useState(new Date()) useEffect(() => { const timer = setInterval(() => { setTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) const formatTime = (date: Date) => { return date.toLocaleTimeString('vi-VN', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }) } const formatDate = (date: Date) => { return date.toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) } return (

{formatTime(time)}

{formatDate(time)}

) } export default ClockWidget [V0_FILE]typescriptreact:file="components/shortcut-manager.tsx" "use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Plus, MoreVertical, Edit, Trash, Grid3X3, Grid2X2, LayoutGrid } from 'lucide-react' import { ensureProtocol } from "@/lib/utils" import { ShortcutIcon } from "@/components/shortcut-icon" export interface Shortcut { id: string name: string url: string } interface ShortcutManagerProps { shortcuts: Shortcut[] setShortcuts: (shortcuts: Shortcut[]) => void } type LayoutType = "grid-4" | "grid-5" | "grid-6" | "list" export function ShortcutManager({ shortcuts, setShortcuts }: ShortcutManagerProps) { const [isDialogOpen, setIsDialogOpen] = React.useState(false) const [editingShortcut, setEditingShortcut] = React.useState(null) const [shortcutName, setShortcutName] = React.useState("") const [shortcutUrl, setShortcutUrl] = React.useState("") const [layout, setLayout] = React.useState("grid-5") const [showLayoutDialog, setShowLayoutDialog] = React.useState(false) const handleOpenDialog = (shortcut?: Shortcut) => { if (shortcut) { setEditingShortcut(shortcut) setShortcutName(shortcut.name) setShortcutUrl(shortcut.url) } else { setEditingShortcut(null) setShortcutName("") setShortcutUrl("") } setIsDialogOpen(true) } const handleSaveShortcut = () => { if (!shortcutName.trim() || !shortcutUrl.trim()) return const formattedUrl = ensureProtocol(shortcutUrl.trim()) if (editingShortcut) { setShortcuts( shortcuts.map((s) => s.id === editingShortcut.id ? { ...s, name: shortcutName, url: formattedUrl } : s ) ) } else { const newShortcut: Shortcut = { id: Date.now().toString(), name: shortcutName, url: formattedUrl, } setShortcuts([...shortcuts, newShortcut]) } setIsDialogOpen(false) } const handleDeleteShortcut = (id: string) => { setShortcuts(shortcuts.filter((s) => s.id !== id)) } const getGridClass = () => { switch (layout) { case "grid-4": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4" case "grid-5": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5" case "grid-6": return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6" case "list": return "grid-cols-1 sm:grid-cols-2 md:grid-cols-3" default: return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5" } } return (

Phím tắt

{shortcuts.map((shortcut) => (

{shortcut.name}

handleOpenDialog(shortcut)}> Chỉnh sửa e.preventDefault()}> Xóa Bạn có chắc chắn muốn xóa? Hành động này không thể hoàn tác. Thao tác này sẽ xóa vĩnh viễn phím tắt "{shortcut.name}". Hủy handleDeleteShortcut(shortcut.id)}> Xóa ))}

{/* Layout Selection Dialog */} {/* Add/Edit Shortcut Dialog */}

) } export default ShortcutManager [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "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="app/layout.tsx" import "@/app/globals.css" import { Dosis } from 'next/font/google' import { ThemeProvider } from "@/components/theme-provider" import { ClickEffectProvider } from "@/components/click-effect-provider" import type React from "react" const dosis = Dosis({ subsets: ["latin"] }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { Moon, Sun, Monitor } 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 ThemeToggle() { const { setTheme, theme } = useTheme() return ( setTheme("light")}> Sáng setTheme("dark")}> Tối setTheme("system")}> Hệ thống ) } [V0_FILE]typescriptreact:file="components/weather-widget.tsx" "use client" import * as React from "react" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Cloud, Sun, CloudRain, CloudSnow, MapPin, Thermometer } from 'lucide-react' interface WeatherData { location: string temperature: number condition: string humidity: number windSpeed: number icon: string } export function WeatherWidget() { const [weather, setWeather] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { const fetchWeather = async () => { try { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( async (position) => { const { latitude, longitude } = position.coords try { // Sử dụng API miễn phí không cần key const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&hourly=temperature_2m,relative_humidity_2m,wind_speed_10m&timezone=auto` ) if (!response.ok) { throw new Error('Không thể lấy dữ liệu thời tiết') } const data = await response.json() const current = data.current_weather // Lấy tên thành phố từ reverse geocoding const locationResponse = await fetch( `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=vi` ) const locationData = await locationResponse.json() setWeather({ location: locationData.city || locationData.locality || "Vị trí hiện tại", temperature: Math.round(current.temperature), condition: getWeatherCondition(current.weathercode), humidity: Math.round(data.hourly.relative_humidity_2m[0] || 65), windSpeed: Math.round(current.windspeed * 10) / 10, icon: getWeatherIcon(current.weathercode) }) } catch (err) { console.error("Weather API error:", err) // Fallback với dữ liệu mẫu dựa trên thời gian const hour = new Date().getHours() setWeather({ location: "Vị trí hiện tại", temperature: Math.round(20 + Math.random() * 10), condition: hour > 6 && hour < 18 ? "Nắng" : "Đêm quang đãng", humidity: Math.round(50 + Math.random() * 30), windSpeed: Math.round(Math.random() * 5 * 10) / 10, icon: hour > 6 && hour < 18 ? "sun" : "moon" }) } }, () => { // Fallback nếu không có quyền truy cập vị trí const hour = new Date().getHours() setWeather({ location: "Vị trí không xác định", temperature: Math.round(20 + Math.random() * 10), condition: hour > 6 && hour < 18 ? "Nắng" : "Đêm quang đãng", humidity: Math.round(50 + Math.random() * 30), windSpeed: Math.round(Math.random() * 5 * 10) / 10, icon: hour > 6 && hour < 18 ? "sun" : "moon" }) } ) } } catch (err) { setError("Không thể tải thông tin thời tiết") } finally { setLoading(false) } } fetchWeather() }, []) const getWeatherCondition = (code: number): string => { if (code === 0) return "Trời quang" if (code <= 3) return "Có mây" if (code <= 67) return "Mưa" if (code <= 77) return "Tuyết" if (code <= 82) return "Mưa rào" return "Thời tiết xấu" } const getWeatherIcon = (code: number): string => { if (code === 0) return "sun" if (code <= 3) return "cloud" if (code <= 67) return "rain" if (code <= 77) return "snow" return "cloud" } const renderWeatherIcon = (iconType: string) => { switch (iconType) { case "rain": return case "snow": return case "cloud": return case "sun": default: return } } if (loading) { return (

Đang tải thời tiết...

) } if (error || !weather) { return (

{error || "Lỗi tải thời tiết"}

) } return (

{weather.location}

{weather.temperature}°C

{weather.condition}

{renderWeatherIcon(weather.icon)}

Độ ẩm: {weather.humidity}% Gió: {weather.windSpeed} m/s

) } export default WeatherWidget [V0_FILE]typescriptreact:file="components/ai-chatbot.tsx" "use client" import * as React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { MessageSquare, Send } from 'lucide-react' import { ScrollArea } from "@/components/ui/scroll-area" interface ChatMessage { role: "user" | "ai" content: string } export function AIChatbot() { const [open, setOpen] = useState(false) const [messages, setMessages] = useState([ { role: "ai", content: "Chào bạn! Tôi là Melody AI, rất vui được hỗ trợ bạn trong ngày hôm nay!" } ]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const scrollAreaRef = useRef(null) const sendMessage = async () => { if (!input.trim()) return const text = input.trim() const userMessage: ChatMessage = { role: "user", content: text } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { // Gọi trực tiếp đến model Melody AI const response = await fetch("https://me-lo-dy-ai.zapier.app/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ message: text, conversation_id: Date.now().toString() // Tạo ID cuộc trò chuyện }), }) if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } // Xử lý response dựa trên content type const contentType = response.headers.get("content-type") || "" let aiResponse = "" if (contentType.includes("application/json")) { const data = await response.json() // Thử các trường phổ biến cho response aiResponse = data.response || data.reply || data.answer || data.message || data.text || "" if (!aiResponse && typeof data === "string") { aiResponse = data } if (!aiResponse) { aiResponse = "Xin lỗi, tôi không thể xử lý yêu cầu của bạn lúc này." } } else { // Nếu là plain text aiResponse = await response.text() } const aiMessage: ChatMessage = { role: "ai", content: aiResponse.trim() || "Xin lỗi, tôi không nhận được phản hồi từ server." } setMessages((prev) => [...prev, aiMessage]) } catch (error: any) { console.error("Error calling Melody AI:", error) let errorMessage = "Đã xảy ra lỗi khi kết nối với Melody AI." if (error.name === "TypeError" && error.message.includes("fetch")) { errorMessage = "Không thể kết nối với Melody AI. Vui lòng kiểm tra kết nối mạng." } else if (error.message.includes("404")) { errorMessage = "Không tìm thấy dịch vụ Melody AI." } else if (error.message.includes("500")) { errorMessage = "Melody AI đang gặp sự cố. Vui lòng thử lại sau." } setMessages((prev) => [...prev, { role: "ai", content: errorMessage }]) } finally { setIsLoading(false) } } useEffect(() => { // Scroll to bottom when new messages arrive if (scrollAreaRef.current) { scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight } }, [messages]) return ( ) } export default AIChatbot [V0_FILE]typescriptreact:file="components/new-tab-dashboard.tsx" "use client" import * as React from "react" import { motion } from "framer-motion" import { SearchBar } from "@/components/search-bar" import { BackgroundSetter } from "@/components/background-setter" import { ShortcutManager, type Shortcut } from "@/components/shortcut-manager" import { ClockWidget } from "@/components/clock-widget" import { WeatherWidget } from "@/components/weather-widget" import { useLocalStorage } from "@/hooks/use-local-storage" import { cn, getYouTubeVideoId, getYouTubePlaylistId, getYouTubeChannelIdentifier } from "@/lib/utils" import { PlayerInfo } from "@/components/player-info" import { ThemeToggle } from "@/components/theme-toggle" import { AIChatbot } from "@/components/ai-chatbot" interface BackgroundSettings { type: "image" | "video" | "youtube-single" | "youtube-playlist" | "youtube-channel" | "solid-color" | "uploaded-file" value: string } interface YouTubeVideoData { id: string title: string thumbnail: string } const defaultShortcuts: Shortcut[] = [ { id: "1", name: "Google", url: "https://www.google.com" }, { id: "2", name: "YouTube", url: "https://www.youtube.com" }, { id: "3", name: "GitHub", url: "https://github.com" }, { id: "4", name: "Vercel", url: "https://vercel.com" }, ] const defaultBackground: BackgroundSettings = { type: "image", value: "/placeholder.svg?height=1080&width=1920", } export function NewTabDashboard() { const [shortcuts, setShortcuts] = useLocalStorage("new-tab-shortcuts", defaultShortcuts) const [background, setBackground] = useLocalStorage("new-tab-background", defaultBackground) // YouTube state const [allYouTubeVideos, setAllYouTubeVideos] = React.useState([]) const [currentVideoIndex, setCurrentVideoIndex] = React.useState(0) const [currentYouTubeVideo, setCurrentYouTubeVideo] = React.useState(null) const [isLoadingYouTube, setIsLoadingYouTube] = React.useState(false) const [errorYouTube, setErrorYouTube] = React.useState(null) const [showFullPlayer, setShowFullPlayer] = React.useState(false) const [isPlayerPlaying, setIsPlayerPlaying] = React.useState(false) // Start paused const [isPlayerMuted, setIsPlayerMuted] = React.useState(false) // Start unmuted const videoRef = React.useRef(null) const iframeRef = React.useRef(null) // Video controls for regular video const handleVideoTogglePlayPause = React.useCallback(() => { if (videoRef.current) { if (isPlayerPlaying) { videoRef.current.pause() } else { videoRef.current.play().catch(console.error) } setIsPlayerPlaying(!isPlayerPlaying) } }, [isPlayerPlaying]) const handleVideoToggleMute = React.useCallback(() => { if (videoRef.current) { videoRef.current.muted = !isPlayerMuted setIsPlayerMuted(!isPlayerMuted) } }, [isPlayerMuted]) // YouTube controls const postMessageToPlayer = React.useCallback((action: string, value?: any) => { if (iframeRef.current?.contentWindow) { iframeRef.current.contentWindow.postMessage( JSON.stringify({ event: "command", func: action, args: value ? [value] : [], }), "*" ) } }, []) const handleYouTubeTogglePlayPause = React.useCallback(() => { if (isPlayerPlaying) { postMessageToPlayer("pauseVideo") } else { postMessageToPlayer("playVideo") } setIsPlayerPlaying(!isPlayerPlaying) }, [isPlayerPlaying, postMessageToPlayer]) const handleYouTubeToggleMute = React.useCallback(() => { if (isPlayerMuted) { postMessageToPlayer("unMute") } else { postMessageToPlayer("mute") } setIsPlayerMuted(!isPlayerMuted) }, [isPlayerMuted, postMessageToPlayer]) const handleNextVideo = React.useCallback(() => { if (allYouTubeVideos.length > 1) { const next = (currentVideoIndex + 1) % allYouTubeVideos.length setCurrentVideoIndex(next) setCurrentYouTubeVideo(allYouTubeVideos[next]) setIsPlayerPlaying(true) } }, [allYouTubeVideos, currentVideoIndex]) // Load YT data React.useEffect(() => { if (background.type.startsWith("youtube") && background.value) { setIsLoadingYouTube(true) setErrorYouTube(null) setAllYouTubeVideos([]) setCurrentVideoIndex(0) const fetchVideos = async () => { let videos: YouTubeVideoData[] = [] if (background.type === "youtube-single") { const vid = getYouTubeVideoId(background.value) if (!vid) { setErrorYouTube("URL video YouTube không hợp lệ.") setIsLoadingYouTube(false) return } try { const res = await fetch(`/api/youtube-videos?searchTerm=${vid}`) const data = await res.json() if (data.videos?.length) videos = [data.videos[0]] else setErrorYouTube("Không tìm thấy video YouTube.") } catch { setErrorYouTube("Không thể tải chi tiết video YouTube.") } } if (background.type === "youtube-playlist") { const pid = getYouTubePlaylistId(background.value) if (!pid) { setErrorYouTube("URL playlist YouTube không hợp lệ.") setIsLoadingYouTube(false) return } try { const res = await fetch(`/api/youtube-videos?playlistId=${pid}`) const data = await res.json() videos = data.videos || [] if (!videos.length) setErrorYouTube("Không tìm thấy video nào trong playlist này.") } catch (e: any) { setErrorYouTube(`Lỗi khi tải video từ playlist: ${e.message}`) } } if (background.type === "youtube-channel") { const ident = getYouTubeChannelIdentifier(background.value) if (!ident.value) { setErrorYouTube("URL kênh YouTube không hợp lệ.") setIsLoadingYouTube(false) return } try { const res = await fetch(`/api/youtube-videos?channelId=${encodeURIComponent(background.value)}`) const data = await res.json() videos = data.videos || [] if (!videos.length) setErrorYouTube("Không tìm thấy video nào trong kênh này.") } catch (e: any) { setErrorYouTube(`Lỗi khi tải video từ kênh: ${e.message}`) } } if (videos.length) { setAllYouTubeVideos(videos) setCurrentYouTubeVideo(videos[0]) setIsPlayerPlaying(false) // Start paused setIsPlayerMuted(false) // Start unmuted } else { setCurrentYouTubeVideo(null) } setIsLoadingYouTube(false) } fetchVideos() } else { setCurrentYouTubeVideo(null) setIsLoadingYouTube(false) setErrorYouTube(null) setAllYouTubeVideos([]) setCurrentVideoIndex(0) } }, [background]) // Sync when index changes React.useEffect(() => { if (allYouTubeVideos.length && currentVideoIndex < allYouTubeVideos.length) { setCurrentYouTubeVideo(allYouTubeVideos[currentVideoIndex]) } }, [currentVideoIndex, allYouTubeVideos]) const youTubeEmbedUrl = currentYouTubeVideo?.id ? `https://www.youtube.com/embed/${currentYouTubeVideo.id}?autoplay=0&loop=1&controls=${ showFullPlayer ? 1 : 0 }&mute=0&playsinline=1&enablejsapi=1&playlist=${ background.type === "youtube-single" ? currentYouTubeVideo.id : "" }` : null const renderBackground = () => { switch (background.type) { case "image": case "uploaded-file": return (

) case "video": return (