Spaces:
Sleeping
Sleeping
File size: 2,891 Bytes
52b4c36 3ba9c0c 52b4c36 3ba9c0c 52b4c36 42501f7 52b4c36 edd2230 3ba9c0c 52b4c36 3ba9c0c 52b4c36 42501f7 52b4c36 42501f7 edd2230 42501f7 52b4c36 42501f7 5bb0441 42501f7 5bb0441 42501f7 52b4c36 42501f7 52b4c36 42501f7 52b4c36 3ba9c0c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
'use client';
import { useChat, type Message } from 'ai/react';
import '@/app/globals.css';
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 { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { toast } from 'react-hot-toast';
import { usePathname, useRouter } from 'next/navigation';
import { useAtom } from 'jotai';
import { targetImageAtom } from '@/state';
import Image from 'next/image';
import { ThemeToggle } from './theme-toggle';
export interface ChatProps extends React.ComponentProps<'div'> {
initialMessages?: Message[];
id?: string;
}
export function Chat({ id, initialMessages, className }: ChatProps) {
const router = useRouter();
const path = usePathname();
const [targetImage, setTargetImage] = useAtom(targetImageAtom);
const { messages, append, reload, stop, isLoading, input, setInput } =
useChat({
initialMessages,
id,
body: {
id,
image: targetImage,
},
onResponse(response) {
if (response.status === 401) {
toast.error(response.statusText);
}
},
});
if (!targetImage)
return (
<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
<EmptyScreen />
</div>
);
return (
<>
<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
<div className="flex h-full">
<div className="w-1/2 relative border-r-2 border-gray-200">
<div className="relative aspect-[1/1] w-full px-12">
<div className="flex items-center h-[600px] relative">
<Image
src={targetImage}
alt="target image"
layout="fill"
objectFit="contain"
className="rounded-xl bg-gray-200"
/>
</div>
<button
className="px-2 py-1 rounded-lg text-gray-600 border-2 border-gray-600 flex items-center mt-4"
onClick={() => setTargetImage(null)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="size-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
Back
</button>
</div>
</div>
<div className="w-1/2 relative overflow-auto">
<ChatList messages={messages} isLoading={isLoading} />
</div>
</div>
<ChatScrollAnchor trackVisibility={isLoading} />
</div>
<ChatPanel
id={id}
isLoading={isLoading}
stop={stop}
append={append}
reload={reload}
messages={messages}
input={input}
setInput={setInput}
/>
</>
);
}
|