73 lines
2 KiB
TypeScript
73 lines
2 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { ChatList } from '@/components/chat-list'
|
|
import { ChatPanel } from '@/components/chat-panel'
|
|
import { EmptyScreen } from '@/components/empty-screen'
|
|
import { ChatScrollAnchor } from '@/components/chat-scroll-anchor'
|
|
import { useLocalStorage } from '@/lib/hooks/use-local-storage'
|
|
import { useEffect, useState } from 'react'
|
|
import { useUIState, useAIState } from 'ai/rsc'
|
|
import { Session } from '@/lib/types'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { Message } from '@/lib/chat/actions'
|
|
import { toast } from 'sonner'
|
|
|
|
export interface ChatProps extends React.ComponentProps<'div'> {
|
|
initialMessages?: Message[]
|
|
id?: string
|
|
session?: Session
|
|
missingKeys: string[]
|
|
}
|
|
|
|
export function Chat({ id, className, session, missingKeys }: ChatProps) {
|
|
const router = useRouter()
|
|
const path = usePathname()
|
|
const [input, setInput] = useState('')
|
|
const [messages] = useUIState()
|
|
const [aiState] = useAIState()
|
|
const isLoading = true
|
|
|
|
const [_, setNewChatId] = useLocalStorage('newChatId', id)
|
|
|
|
useEffect(() => {
|
|
if (session?.user) {
|
|
if (!path.includes('chat') && messages.length === 1) {
|
|
window.history.replaceState({}, '', `/chat/${id}`)
|
|
}
|
|
}
|
|
}, [id, path, session?.user, messages])
|
|
|
|
useEffect(() => {
|
|
const messagesLength = aiState.messages?.length
|
|
if (messagesLength === 2) {
|
|
router.refresh()
|
|
}
|
|
}, [aiState.messages, router])
|
|
|
|
useEffect(() => {
|
|
setNewChatId(id)
|
|
})
|
|
|
|
useEffect(() => {
|
|
missingKeys.map(key => {
|
|
toast.error(`Missing ${key} environment variable!`)
|
|
})
|
|
}, [missingKeys])
|
|
|
|
return (
|
|
<>
|
|
<div className={cn('pb-[200px] pt-4 md:pt-10', className)}>
|
|
{messages.length ? (
|
|
<>
|
|
<ChatList messages={messages} isShared={false} session={session} />
|
|
<ChatScrollAnchor trackVisibility={isLoading} />
|
|
</>
|
|
) : (
|
|
<EmptyScreen setInput={setInput} />
|
|
)}
|
|
</div>
|
|
<ChatPanel id={id} input={input} setInput={setInput} />
|
|
</>
|
|
)
|
|
}
|