136 lines
3.5 KiB
TypeScript
136 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import type { Attachment, UIMessage } from 'ai';
|
|
import { useChat } from '@ai-sdk/react';
|
|
import { useState } from 'react';
|
|
import useSWR, { useSWRConfig } from 'swr';
|
|
import { ChatHeader } from '@/components/chat-header';
|
|
import type { Vote } from '@/lib/db/schema';
|
|
import { fetcher, generateUUID } from '@/lib/utils';
|
|
import { Artifact } from './artifact';
|
|
import { MultimodalInput } from './multimodal-input';
|
|
import { Messages } from './messages';
|
|
import type { VisibilityType } from './visibility-selector';
|
|
import { useArtifactSelector } from '@/hooks/use-artifact';
|
|
import { unstable_serialize } from 'swr/infinite';
|
|
import { getChatHistoryPaginationKey } from './sidebar-history';
|
|
import { toast } from './toast';
|
|
import type { Session } from 'next-auth';
|
|
|
|
export function Chat({
|
|
id,
|
|
initialMessages,
|
|
selectedChatModel,
|
|
selectedVisibilityType,
|
|
isReadonly,
|
|
session,
|
|
}: {
|
|
id: string;
|
|
initialMessages: Array<UIMessage>;
|
|
selectedChatModel: string;
|
|
selectedVisibilityType: VisibilityType;
|
|
isReadonly: boolean;
|
|
session: Session;
|
|
}) {
|
|
const { mutate } = useSWRConfig();
|
|
|
|
const {
|
|
messages,
|
|
setMessages,
|
|
handleSubmit,
|
|
input,
|
|
setInput,
|
|
append,
|
|
status,
|
|
stop,
|
|
reload,
|
|
} = useChat({
|
|
id,
|
|
initialMessages,
|
|
experimental_throttle: 100,
|
|
sendExtraMessageFields: true,
|
|
generateId: generateUUID,
|
|
experimental_prepareRequestBody: (body) => ({
|
|
id,
|
|
message: body.messages.at(-1),
|
|
selectedChatModel,
|
|
}),
|
|
onFinish: () => {
|
|
mutate(unstable_serialize(getChatHistoryPaginationKey));
|
|
},
|
|
onError: (error) => {
|
|
toast({
|
|
type: 'error',
|
|
description: error.message,
|
|
});
|
|
},
|
|
});
|
|
|
|
const { data: votes } = useSWR<Array<Vote>>(
|
|
messages.length >= 2 ? `/api/vote?chatId=${id}` : null,
|
|
fetcher,
|
|
);
|
|
|
|
const [attachments, setAttachments] = useState<Array<Attachment>>([]);
|
|
const isArtifactVisible = useArtifactSelector((state) => state.isVisible);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col min-w-0 h-dvh bg-background">
|
|
<ChatHeader
|
|
chatId={id}
|
|
selectedModelId={selectedChatModel}
|
|
selectedVisibilityType={selectedVisibilityType}
|
|
isReadonly={isReadonly}
|
|
session={session}
|
|
/>
|
|
|
|
<Messages
|
|
chatId={id}
|
|
status={status}
|
|
votes={votes}
|
|
messages={messages}
|
|
setMessages={setMessages}
|
|
reload={reload}
|
|
isReadonly={isReadonly}
|
|
isArtifactVisible={isArtifactVisible}
|
|
/>
|
|
|
|
<form className="flex mx-auto px-4 bg-background pb-4 md:pb-6 gap-2 w-full md:max-w-3xl">
|
|
{!isReadonly && (
|
|
<MultimodalInput
|
|
chatId={id}
|
|
input={input}
|
|
setInput={setInput}
|
|
handleSubmit={handleSubmit}
|
|
status={status}
|
|
stop={stop}
|
|
attachments={attachments}
|
|
setAttachments={setAttachments}
|
|
messages={messages}
|
|
setMessages={setMessages}
|
|
append={append}
|
|
/>
|
|
)}
|
|
</form>
|
|
</div>
|
|
|
|
<Artifact
|
|
chatId={id}
|
|
input={input}
|
|
setInput={setInput}
|
|
handleSubmit={handleSubmit}
|
|
status={status}
|
|
stop={stop}
|
|
attachments={attachments}
|
|
setAttachments={setAttachments}
|
|
append={append}
|
|
messages={messages}
|
|
setMessages={setMessages}
|
|
reload={reload}
|
|
votes={votes}
|
|
isReadonly={isReadonly}
|
|
/>
|
|
</>
|
|
);
|
|
}
|