11'use client'
22
3- import { useChat } from 'ai/react'
3+ // import { useChat } from 'ai/react' // Removed for testing
44import { useState } from 'react'
55import ErrorBoundary , { ChatErrorFallback } from '@/components/ErrorBoundary'
66
7- export default function ChatPage ( ) {
7+ export default function ChatPage ( ) {
88 const [ isLoading , setIsLoading ] = useState ( false )
9-
10- const { messages, input, handleInputChange, handleSubmit, isLoading : chatLoading } = useChat ( {
11- api : '/api/chat' ,
12- onError : ( error ) => {
13- console . error ( 'Chat error:' , error )
14- }
15- } )
9+ const [ input , setInput ] = useState ( '' )
10+
11+ // Mock chat functionality for testing
12+ const messages : any [ ] = [ ]
13+ const handleInputChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
14+ setInput ( e . target . value )
15+ }
16+ const handleSubmit = async ( ) => { }
17+ const chatLoading = false
1618
17- const handleFormSubmit = async ( e : React . FormEvent ) => {
19+ const handleFormSubmit = async ( e : React . FormEvent < HTMLFormElement > ) => {
1820 setIsLoading ( true )
1921 try {
20- await handleSubmit ( e )
22+ await handleSubmit ( )
2123 } finally {
2224 setIsLoading ( false )
2325 }
2426 }
2527
2628 return (
2729 < ErrorBoundary fallback = { ChatErrorFallback } >
28- < div className = " min-h-screen bg-gray-50" >
30+ < div className = ' min-h-screen bg-gray-50' >
2931 { /* Header */ }
30- < header className = " bg-white shadow-sm border-b" >
31- < div className = " max-w-4xl mx-auto px-4 py-4" >
32- < div className = " flex items-center justify-between" >
33- < h1 className = " text-2xl font-bold text-gray-900" >
32+ < header className = ' bg-white shadow-sm border-b' >
33+ < div className = ' max-w-4xl mx-auto px-4 py-4' >
34+ < div className = ' flex items-center justify-between' >
35+ < h1 className = ' text-2xl font-bold text-gray-900' >
3436 🤖 AI Chat
3537 </ h1 >
36- < a
37- href = "/"
38- className = " text-blue-600 hover:text-blue-800 transition-colors"
38+ < a
39+ href = '/'
40+ className = ' text-blue-600 hover:text-blue-800 transition-colors'
3941 >
4042 ← Back to Home
4143 </ a >
@@ -44,18 +46,18 @@ export default function ChatPage() {
4446 </ header >
4547
4648 { /* Chat Container */ }
47- < div className = " max-w-4xl mx-auto px-4 py-6" >
48- < div className = " bg-white rounded-lg shadow-lg h-[600px] flex flex-col" >
49+ < div className = ' max-w-4xl mx-auto px-4 py-6' >
50+ < div className = ' bg-white rounded-lg shadow-lg h-[600px] flex flex-col' >
4951 { /* Messages */ }
50- < div className = " flex-1 overflow-y-auto p-6 space-y-4" >
52+ < div className = ' flex-1 overflow-y-auto p-6 space-y-4' >
5153 { messages . length === 0 && (
52- < div className = " text-center text-gray-500 mt-8" >
53- < div className = " text-4xl mb-4" > 👋</ div >
54- < p className = " text-lg" > Hello! How can I help you today?</ p >
55- < p className = " text-sm mt-2" > Start a conversation by typing a message below.</ p >
54+ < div className = ' text-center text-gray-500 mt-8' >
55+ < div className = ' text-4xl mb-4' > 👋</ div >
56+ < p className = ' text-lg' > Hello! How can I help you today?</ p >
57+ < p className = ' text-sm mt-2' > Start a conversation by typing a message below.</ p >
5658 </ div >
5759 ) }
58-
60+
5961 { messages . map ( ( message ) => (
6062 < div
6163 key = { message . id }
@@ -68,52 +70,53 @@ export default function ChatPage() {
6870 : 'bg-gray-200 text-gray-900'
6971 } `}
7072 >
71- < div className = " whitespace-pre-wrap" > { message . content } </ div >
73+ < div className = ' whitespace-pre-wrap' > { message . content } </ div >
7274 < div className = { `text-xs mt-1 ${
7375 message . role === 'user' ? 'text-blue-100' : 'text-gray-500'
74- } `} >
76+ } `}
77+ >
7578 { message . role === 'user' ? 'You' : 'AI' }
7679 </ div >
7780 </ div >
7881 </ div >
7982 ) ) }
80-
83+
8184 { ( chatLoading || isLoading ) && (
82- < div className = " flex justify-start" >
83- < div className = " bg-gray-200 text-gray-900 rounded-lg px-4 py-2" >
84- < div className = " flex items-center space-x-2" >
85- < div className = " flex space-x-1" >
86- < div className = " w-2 h-2 bg-gray-500 rounded-full animate-bounce" > </ div >
87- < div className = " w-2 h-2 bg-gray-500 rounded-full animate-bounce" style = { { animationDelay : '0.1s' } } > </ div >
88- < div className = " w-2 h-2 bg-gray-500 rounded-full animate-bounce" style = { { animationDelay : '0.2s' } } > </ div >
85+ < div className = ' flex justify-start' >
86+ < div className = ' bg-gray-200 text-gray-900 rounded-lg px-4 py-2' >
87+ < div className = ' flex items-center space-x-2' >
88+ < div className = ' flex space-x-1' >
89+ < div className = ' w-2 h-2 bg-gray-500 rounded-full animate-bounce' / >
90+ < div className = ' w-2 h-2 bg-gray-500 rounded-full animate-bounce' style = { { animationDelay : '0.1s' } } / >
91+ < div className = ' w-2 h-2 bg-gray-500 rounded-full animate-bounce' style = { { animationDelay : '0.2s' } } / >
8992 </ div >
90- < span className = " text-sm" > AI is thinking...</ span >
93+ < span className = ' text-sm' > AI is thinking...</ span >
9194 </ div >
9295 </ div >
9396 </ div >
9497 ) }
9598 </ div >
9699
97100 { /* Input Form */ }
98- < div className = " border-t p-4" >
99- < form onSubmit = { handleFormSubmit } className = " flex gap-2" >
101+ < div className = ' border-t p-4' >
102+ < form onSubmit = { handleFormSubmit } className = ' flex gap-2' >
100103 < input
101104 value = { input }
102105 onChange = { handleInputChange }
103- placeholder = " Type your message here..."
104- className = " flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
106+ placeholder = ' Type your message here...'
107+ className = ' flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent'
105108 disabled = { chatLoading || isLoading }
106109 />
107110 < button
108- type = " submit"
111+ type = ' submit'
109112 disabled = { chatLoading || isLoading || ! input . trim ( ) }
110- className = " bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
113+ className = ' bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors'
111114 >
112115 { chatLoading || isLoading ? 'Sending...' : 'Send' }
113116 </ button >
114117 </ form >
115-
116- < div className = " mt-2 text-xs text-gray-500 text-center" >
118+
119+ < div className = ' mt-2 text-xs text-gray-500 text-center' >
117120 Powered by OpenRouter AI • Model configured via environment variables
118121 </ div >
119122 </ div >
0 commit comments