1- "use client" ;
2- import React , { useEffect } from 'react' ;
3- import Sidebar from '@/components/chat/sidebar'
4- import ChatArea from '@/components/chat/chat-area'
5- import Header from '@/components/layout/header'
6- import Footer from '@/components/layout/footer'
7- import { useState } from 'react'
8- import { useActiveConversation } from '@/hooks/use-active-conversation'
1+ import ClientChatPage from './client-chat-page'
2+ import type { Metadata } from 'next'
3+
4+ export const metadata : Metadata = {
5+ title : 'ChatGPT Clone – Conversation' ,
6+ description : 'Continue your conversation with AI in a modern, professional chat UI.'
7+ }
98
109export default function ChatPage ( { params } : { params : { id : string } } ) {
11- // Unwrap params if it's a promise (future-proof)
12- const { id } = ( typeof ( params as any ) . then === 'function' ) ? React . use ( params ) : params ;
13- const [ sidebarOpen , setSidebarOpen ] = useState ( true )
14- const setActiveConversationId = useActiveConversation ( s => s . setActiveConversationId )
15- useEffect ( ( ) => {
16- if ( id ) setActiveConversationId ( id )
17- } , [ id , setActiveConversationId ] )
18- if ( ! id ) return < div className = "flex items-center justify-center h-screen text-lg" > Invalid conversation</ div >
19- return (
20- < div className = "flex h-screen w-full bg-gradient-to-b from-[#23272f] via-[#202123] to-[#131313] relative" >
21- { /* Sidebar as flex child, always rendered, mini when closed */ }
22- < div className = { `transition-all duration-200 h-full ${ sidebarOpen ? 'w-[260px]' : 'w-[72px]' } flex-shrink-0 overflow-hidden` } >
23- < Sidebar open = { sidebarOpen } setOpen = { setSidebarOpen } />
24- </ div >
25- < main className = "flex-1 min-w-0 flex flex-col h-screen" >
26- < Header />
27- < div className = "flex-1 min-h-0 flex flex-col" >
28- < ChatArea />
29- </ div >
30- < Footer />
31- </ main >
32- { /* Overlay for mobile sidebar */ }
33- { sidebarOpen && (
34- < div
35- className = "fixed inset-0 z-40 bg-black/60 md:hidden"
36- onClick = { ( ) => setSidebarOpen ( false ) }
37- >
38- < aside className = "absolute left-0 top-0 w-[260px] h-full bg-[#202123] shadow-lg" >
39- < Sidebar open = { sidebarOpen } setOpen = { setSidebarOpen } />
40- </ aside >
41- </ div >
42- ) }
43- </ div >
44- )
10+ return < ClientChatPage id = { params . id } />
4511}
0 commit comments