[V0_FILE]png:file="public/images/bd-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-53znvkEpsGVFWBjZ0QL9QMsHYx4Ql6.png" isMerged="true" [V0_FILE]plaintext:file="public/models/fox.glb" query="A simple, low-poly walking fox 3D model" isMerged="true" [V0_FILE]plaintext:file="public/assets/3d/duck.glb" isMerged="true" [V0_FILE]png:file="public/images/3d-flame-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-53znvkEpsGVFWBjZ0QL9QMsHYx4Ql6.png" isMerged="true" [V0_FILE]png:file="public/images/bd-logo-ai-blockchain-dudes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-AzwkKlrhcJ1qF9AptvhMcnvpMqSQGL.png" [V0_FILE]png:file="public/images/user-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-pwJ0x0F0ihc7BESNHajaQYKDNUycft.png" [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Custom colors for the Telegram-like white/orange theme with enhanced glass "page-bg": "#1A1A1A", // Dark background for the overall page "chat-container-bg": "rgba(255, 255, 255, 0.9)", // Almost opaque white for main chat container "chat-area-bg": "rgba(255, 255, 255, 0.95)", // Even more opaque white for the message area background "header-footer-bg": "rgba(255, 255, 255, 0.98)", // Very solid white for header/footer "user-message-bg": "#FF6B00", // Solid orange for user messages "bot-message-bg": "#F0F0F0", // Solid light gray/white for bot messages "primary-text": "#333333", // Dark text for readability on light backgrounds "secondary-text": "#666666", // Lighter dark text for secondary info (improved contrast) "orange-accent": "#FF6B00", // Vibrant orange accent "orange-accent-light": "#FF8C00", // Lighter orange for accents "orange-shadow": "rgba(255, 107, 0, 0.6)", // Stronger orange shadow for glow "glass-border-light": "rgba(0, 0, 0, 0.08)", // Subtle dark border for definition }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", "chat-container": "1rem", // More rectangular with soft corners (reduced from 2rem) "message-bubble": "0.75rem", // Default for message bubbles (reduced from 1rem) "message-tail": "0.25rem", // Small tail for message bubbles (reduced from 0.375rem) }, 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" }, }, "fade-in-slide-up": { "0%": { opacity: "0", transform: "translateY(10px)" }, "100%": { opacity: "1", transform: "translateY(0)" }, }, "pulse-glow": { "0%, 100%": { boxShadow: "0 0 5px var(--tw-shadow-color), 0 0 10px var(--tw-shadow-color)" }, "50%": { boxShadow: "0 0 10px var(--tw-shadow-color), 0 0 20px var(--tw-shadow-color)" }, }, "typing-dot": { "0%, 20%": { opacity: "0" }, "50%": { opacity: "1" }, "100%": { opacity: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in-slide-up": "fade-in-slide-up 0.3s ease-out forwards", "pulse-glow": "pulse-glow 2s infinite alternate", "typing-dot": "typing-dot 1.4s infinite ease-in-out both", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isEdit="true" import type { Message } from "ai" // Allow streaming responses up to 30 seconds export const maxDuration = 30 export async function POST(req: Request) { const { messages }: { messages: Message[] } = await req.json() // Get the last message from the user const lastUserMessage = messages[messages.length - 1] const userPrompt = lastUserMessage?.content.toString().trim() let responseContent: string // Check for predefined answers based on button prompts switch (userPrompt) { case "What is blockchain?": responseContent = "Blockchain is a decentralized, distributed ledger technology that records transactions across many computers. It's known for its security and transparency." break case "Explain DeFi": responseContent = "DeFi, or Decentralized Finance, refers to financial applications built on blockchain technology, aiming to remove intermediaries like banks from financial services." break case "Bitcoin vs Ethereum": responseContent = "Bitcoin is primarily a digital currency, while Ethereum is a platform for decentralized applications (dApps) and smart contracts, with its own cryptocurrency, Ether." break case "Smart contracts": responseContent = "Smart contracts are self-executing contracts with the terms of the agreement directly written into code. They run on a blockchain and automatically execute when conditions are met." break default: // Always return "test risposta" for any other input responseContent = "test risposta" break } // If a predefined answer is found, return it as a stream const stream = new ReadableStream({ async start(controller) { for (const char of responseContent) { controller.enqueue(new TextEncoder().encode(char)) await new Promise((resolve) => setTimeout(resolve, 10)) // Simulate streaming } controller.close() }, }) return new Response(stream, { headers: { "Content-Type": "text/plain; charset=utf-8", }, }) } [V0_FILE]typescriptreact:file="components/chat-ui.tsx" isEdit="true" "use client" import Image from "next/image" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Send, CircleDot } from "lucide-react" import { useEffect, useRef } from "react" import { cn } from "@/lib/utils" import type { Message, UseChatHelpers } from "ai/react" // Typing Indicator Component function TypingIndicator() { return (

) } interface ChatUIProps { messages: Message[] input: string handleInputChange: UseChatHelpers["handleInputChange"] handleSubmit: UseChatHelpers["handleSubmit"] setInput: UseChatHelpers["setInput"] isLoading: boolean // Added isLoading prop } export function ChatUI({ messages, input, handleInputChange, handleSubmit, setInput, isLoading }: ChatUIProps) { const messagesEndRef = useRef(null) const predefinedPrompts = ["What is blockchain?", "Explain DeFi", "Bitcoin vs Ethereum", "Smart contracts"] const handleButtonClick = (prompt: string) => { setInput(prompt) // Programmatically submit the form after setting the input setTimeout(() => { const form = document.getElementById("chat-form") if (form) { form.dispatchEvent(new Event("submit", { cancelable: true, bubbles: true })) } }, 0) } useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages, isLoading]) // Scroll when messages or loading state changes return (

{/* Header */}

BD Assistant

Blockchain & Cryptocurrency Expert

Online

{/* Chat Area */}

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

{m.role === "assistant" && (

)}

{m.role === "user" ? "User BD" : "AI Blockchain Dudes"}

{m.content}

{m.role === "user" && (

{" "} {/* Aligned to bottom of message */}

)}

))} {isLoading && (

)}

{/* Input Area */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useChat } from "@ai-sdk/react" import { ChatUI } from "@/components/chat-ui" import Image from "next/image" // Import Image for background logo export default function ChatbotPage() { const chatProps = useChat({ initialMessages: [ { id: "welcome", role: "assistant", content: "Welcome! 👋\nI'm your AI Blockchain Dudes assistant specialized in blockchain and cryptocurrency. Ask me anything!", }, ], }) return (

{/* Background with blurred BD 3D logo and white/orange overlay */}

{/* Blurred background image - using Image component for optimization */}

{/* White/Orange transparent overlay for glass effect */}

{" "} {/* Added backdrop-blur-xl */}

{/* 2D Chat UI Overlay */}

{" "} {/* Ensure this div takes full height and centers content */}

) }