| 1 | 'use client' |
| 2 | |
| 3 | import { useLocalStorage } from '../_lib/hooks/use-local-storage'; |
| 4 | import { cn } from '../_lib/utils'; |
| 5 | import { ChatPanel } from '../_ui/components/chat-panel'; |
| 6 | import { EmptyScreen } from '../_ui/components/empty-screen'; |
| 7 | import { useChat, type Message } from 'ai/react' |
| 8 | import { usePathname } from 'next/navigation'; |
| 9 | import { toast } from 'react-hot-toast' |
| 10 | |
| 11 | export interface ChatProps extends React.ComponentProps<'div'> { |
| 12 | initialMessages?: Message[] |
| 13 | id?: string |
| 14 | } |
| 15 | |
| 16 | export default function Page({id, initialMessages, className}: ChatProps) { |
| 17 | const path = usePathname() |
| 18 | const [previewToken, setPreviewToken] = useLocalStorage<string | null>( |
| 19 | 'ai-token', |
| 20 | null |
| 21 | ) |
| 22 | const { messages, append, reload, stop, isLoading, input, setInput } = |
| 23 | useChat({ |
| 24 | initialMessages, |
| 25 | id, |
| 26 | body: { |
| 27 | id, |
| 28 | previewToken |
| 29 | }, |
| 30 | onResponse(response) { |
| 31 | if (response.status === 401) { |
| 32 | toast.error(response.statusText) |
| 33 | } |
| 34 | }, |
| 35 | onFinish() { |
| 36 | if (!path.includes('chat')) { |
| 37 | window.history.pushState({}, '', `/chat/${id}`) |
| 38 | } |
| 39 | } |
| 40 | }) |
| 41 | |
| 42 | return ( |
| 43 | <div className="prose prose-sm prose-invert max-w-none"> |
| 44 | <div className="grid grid-cols-1 gap-6 lg:grid-cols-3"> |
| 45 | <div className={cn('pb-[200px] pt-4 md:pt-10', className)}> |
| 46 | {messages.length ? ( |
| 47 | <> |
| 48 | </> |
| 49 | ) : ( |
| 50 | <EmptyScreen setInput={setInput} /> |
| 51 | )} |
| 52 | </div> |
| 53 | |
| 54 | </div> |
| 55 | </div> |
| 56 | ); |
| 57 | } |