[V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import Chat from "./components/Chat" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "AI Assistant", description: "AI-powered assistant with document upload and web search capabilities", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/components/Chat.tsx" isQuickEdit="true" isMerged="true" "use client" import { Chat } from "@/components/chat" export default function ChatComponent() { return } [V0_FILE]typescriptreact:file="package.json" isMerged="true" { "dependencies": { "react-markdown": "^9.0.1" } } [V0_FILE]typescriptreact:file="app/api/chat/route.ts" isFixed="true" isEdit="true" isQuickEdit="true" import { xai } from "@ai-sdk/xai" import { streamText } from "ai" // Allow streaming responses up to 30 seconds export const maxDuration = 30 export async function POST(req: Request) { try { // Extract the messages and other data from the request const { messages, webSearch, files } = await req.json() // Log the request for debugging console.log("Chat API request:", { messageCount: messages.length, webSearch, fileCount: files?.length || 0, }) // Prepare system message based on settings let systemMessage = "You are a helpful AI assistant. Use markdown formatting for better readability." if (webSearch) { systemMessage += " You can search the web to provide up-to-date information." } if (files && files.length > 0) { systemMessage += ` The user has uploaded the following files: ${files.join(", ")}. Reference these when relevant.` } // Verify environment variable if (!process.env.XAI_API_KEY) { console.error("XAI_API_KEY is not defined") return new Response(JSON.stringify({ error: "API key is not configured" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } // Call the Grok model with simplified configuration const result = streamText({ model: xai("grok-3-mini-beta"), // Try grok-1 instead of grok-2 messages: [ { role: "system", content: systemMessage }, ...messages.map((msg) => ({ role: msg.role, content: msg.content, })), ], }) // Return the stream response return result.toDataStreamResponse({ // Add custom error handling getErrorMessage: (error) => { console.error("Stream error:", error) if (error instanceof Error) { return `Error: ${error.message}` } return "An unknown error occurred" }, }) } catch (error) { // Log the full error console.error("Chat API error:", error) // Return a structured error response return new Response( JSON.stringify({ error: error instanceof Error ? error.message : "An unknown error occurred", stack: error instanceof Error ? error.stack : undefined, }), { status: 500, headers: { "Content-Type": "application/json" }, }, ) } } [V0_FILE]typescriptreact:file="components/chat.tsx" isEdit="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Loader2, Send, FileUp, X, AlertCircle, RefreshCw } from "lucide-react" import { cn } from "@/lib/utils" import { Avatar } from "@/components/ui/avatar" import { useChat } from "ai/react" import ReactMarkdown from "react-markdown" import { Alert, AlertDescription } from "@/components/ui/alert" export function Chat() { const [webSearchEnabled, setWebSearchEnabled] = useState(true) const [uploadedFiles, setUploadedFiles] = useState([]) const [errorMessage, setErrorMessage] = useState(null) const fileInputRef = useRef(null) const messagesEndRef = useRef(null) // Use the AI SDK's useChat hook with simplified configuration const { messages, input, handleInputChange, handleSubmit, isLoading, error, reload } = useChat({ api: "/api/chat", body: { webSearch: webSearchEnabled, files: uploadedFiles.map((file) => file.name), }, onError: (e) => { console.error("Chat error:", e) setErrorMessage("Failed to get a response from the AI. Please try again.") }, onFinish: () => { setErrorMessage(null) }, }) // Scroll to bottom when messages change useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleFileUpload = (e: React.ChangeEvent) => { if (e.target.files) { const newFiles = Array.from(e.target.files) setUploadedFiles((prev) => [...prev, ...newFiles]) } // Reset file input if (fileInputRef.current) { fileInputRef.current.value = "" } } const removeFile = (index: number) => { setUploadedFiles((prev) => prev.filter((_, i) => i !== index)) } const triggerFileUpload = () => { fileInputRef.current?.click() } const handleRetry = () => { setErrorMessage(null) reload() } return (

{/* Fixed header */}

AI Law Assistant

Web Search

{/* File chips */} {uploadedFiles.length > 0 && (

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

{file.name}

))}

)} {/* Error alert */} {errorMessage && (

{errorMessage}

)} {/* Scrollable chat area */}

{messages.length === 0 ? (

Ask me anything

I can search the web and analyze documents to help answer your questions

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

{message.role === "user" ? "U" : "AI"}

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

{message.content}

) : (

{message.content}

)}

)) )} {isLoading && messages.length > 0 && messages[messages.length - 1].role !== "assistant" && (

)}

{/* Fixed input area at bottom */}

) } [V0_FILE]typescriptreact:file="app/api/test-xai/route.ts" export async function GET() { try { // Check if the XAI_API_KEY is defined if (!process.env.XAI_API_KEY) { return new Response(JSON.stringify({ error: "XAI_API_KEY is not defined" }), { status: 500, headers: { "Content-Type": "application/json" }, }) } // Return success if the key exists return new Response( JSON.stringify({ status: "ok", message: "XAI_API_KEY is defined", keyLength: process.env.XAI_API_KEY.length, }), { status: 200, headers: { "Content-Type": "application/json" }, }, ) } catch (error) { return new Response( JSON.stringify({ error: error instanceof Error ? error.message : "An unknown error occurred", }), { status: 500, headers: { "Content-Type": "application/json" }, }, ) } }