[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match modern AI chat design brief */ --background: oklch(1 0 0); --foreground: oklch(0.35 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.35 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.35 0 0); --primary: oklch(0.55 0.15 200); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.98 0 0); --secondary-foreground: oklch(0.35 0 0); --muted: oklch(0.98 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.45 0.2 250); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.35 0 0); --input: oklch(0.98 0 0); --ring: oklch(0.55 0.15 200); --chart-1: oklch(0.55 0.15 200); --chart-2: oklch(0.45 0.2 250); --chart-3: oklch(0.6 0.2 30); --chart-4: oklch(0.577 0.245 27.325); --chart-5: oklch(0.65 0.25 40); --radius: 1rem; --sidebar: oklch(1 0 0); --sidebar-foreground: oklch(0.35 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0.35 0 0); --sidebar-accent: oklch(0.55 0.15 200); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.35 0 0); --sidebar-ring: oklch(0.55 0.15 200); } .dark { /* Updated dark mode tokens for consistent theming */ --background: oklch(0.1 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.15 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.6 0.15 200); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.2 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.5 0.2 250); --accent-foreground: oklch(0.95 0 0); --destructive: oklch(0.5 0.2 27); --destructive-foreground: oklch(0.95 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.6 0.15 200); --chart-1: oklch(0.6 0.15 200); --chart-2: oklch(0.5 0.2 250); --chart-3: oklch(0.65 0.2 30); --chart-4: oklch(0.5 0.2 27); --chart-5: oklch(0.7 0.25 40); --sidebar: oklch(0.15 0 0); --sidebar-foreground: oklch(0.95 0 0); --sidebar-primary: oklch(0.6 0.15 200); --sidebar-primary-foreground: oklch(0.95 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.95 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.6 0.15 200); } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import { Send, Bot, User } from "lucide-react" interface Message { id: string content: string role: "user" | "assistant" timestamp: Date } export default function ChatPage() { const [messages, setMessages] = useState([]) const [input, setInput] = useState("") const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!input.trim() || isLoading) return const userMessage: Message = { id: Date.now().toString(), content: input.trim(), role: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") setIsLoading(true) try { // Using the user's provided API structure const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ input: userMessage.content }), }) // Check if response is ok and content-type is JSON if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`) } const contentType = response.headers.get("content-type") if (!contentType || !contentType.includes("application/json")) { const text = await response.text() throw new Error(`Expected JSON response, got: ${text.substring(0, 100)}...`) } const data = await response.json() const assistantMessage: Message = { id: (Date.now() + 1).toString(), content: data.output_text || data.error || "Sorry, I encountered an error.", role: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, assistantMessage]) } catch (error) { console.error("Error:", error) const errorMessage: Message = { id: (Date.now() + 1).toString(), content: `Sorry, I encountered an error: ${error instanceof Error ? error.message : "Unknown error"}. Please try again.`, role: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, errorMessage]) } finally { setIsLoading(false) } } return (

{/* Header */}

AI Assistant

{/* Chat Messages */}

{messages.length === 0 ? (

How can I help you today?

Start a conversation with our AI assistant. Ask questions, get help, or just chat!

) : ( messages.map((message) => (

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

)}

{message.content}

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

)}

)) )} {isLoading && (

Thinking...

)}

{/* Input Form */}

) } [V0_FILE]typescript:file="app/api/chat/route.ts" isEdit="true" import { type NextRequest, NextResponse } from "next/server" import OpenAI from "openai" const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }) export async function POST(request: NextRequest) { try { const { input } = await request.json() if (!input) { return NextResponse.json({ error: "Input is required" }, { status: 400 }) } const response = await client.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "user", content: input, }, ], }) return NextResponse.json({ output_text: response.choices[0]?.message?.content || "No response generated", }) } catch (error: any) { console.error("API Error:", error) return NextResponse.json({ error: error.message ?? "Internal server error" }, { status: 500 }) } }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This