92 lines
2.5 KiB
React
92 lines
2.5 KiB
React
|
"use client"
|
||
|
|
import {
|
||
|
|
ChatInput,
|
||
|
|
ChatInputSubmit,
|
||
|
|
ChatInputTextArea
|
||
|
|
} from "@/components/ui/chat-input"
|
||
|
|
import {
|
||
|
|
ChatMessage,
|
||
|
|
ChatMessageAvatar,
|
||
|
|
ChatMessageContent
|
||
|
|
} from "@/components/ui/chat-message"
|
||
|
|
import { ChatMessageArea } from "@/components/ui/chat-message-area"
|
||
|
|
import { useChat } from "ai/react"
|
||
|
|
|
||
|
|
export function Chat({ className,thread_id,initialMessages, ...props }) {
|
||
|
|
const {
|
||
|
|
messages,
|
||
|
|
input,
|
||
|
|
handleInputChange,
|
||
|
|
handleSubmit,
|
||
|
|
isLoading,
|
||
|
|
stop
|
||
|
|
} = useChat({
|
||
|
|
id: thread_id,
|
||
|
|
api: "/api/chat",
|
||
|
|
sendExtraMessageFields: true,
|
||
|
|
experimental_prepareRequestBody({ messages, id, requestData }) {
|
||
|
|
console.log(requestData);
|
||
|
|
|
||
|
|
return { message: messages[messages.length - 1].content, thread_id, approveObj:requestData };
|
||
|
|
},
|
||
|
|
initialMessages: initialMessages,
|
||
|
|
onFinish: message => {
|
||
|
|
console.log("onFinish", message, completion);
|
||
|
|
},
|
||
|
|
onToolCall: tool => console.log(tool)
|
||
|
|
})
|
||
|
|
console.log("messages",messages);
|
||
|
|
|
||
|
|
const handleSubmitMessage = () => {
|
||
|
|
if (isLoading) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
handleSubmit()
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex-1 flex flex-col h-full overflow-y-auto" {...props}>
|
||
|
|
<ChatMessageArea scrollButtonAlignment="center">
|
||
|
|
<div className="max-w-2xl mx-auto w-full px-4 py-8 space-y-4 text-white">
|
||
|
|
{messages.map(message => {
|
||
|
|
|
||
|
|
|
||
|
|
if (message.role !== "user") {
|
||
|
|
return (
|
||
|
|
<ChatMessage key={message.id} id={message.id}>
|
||
|
|
<ChatMessageAvatar />
|
||
|
|
<ChatMessageContent content={message.content} toolInvocations={message.toolInvocations} interruptSubmitter={handleSubmit}/>
|
||
|
|
</ChatMessage>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
if (!message.content) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ChatMessage
|
||
|
|
key={message.id}
|
||
|
|
id={message.id}
|
||
|
|
variant="bubble"
|
||
|
|
type="outgoing"
|
||
|
|
>
|
||
|
|
<ChatMessageContent content={message.content} />
|
||
|
|
</ChatMessage>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</ChatMessageArea>
|
||
|
|
<div className="px-2 py-4 max-w-2xl mx-auto w-full">
|
||
|
|
<ChatInput
|
||
|
|
value={input}
|
||
|
|
onChange={handleInputChange}
|
||
|
|
onSubmit={handleSubmitMessage}
|
||
|
|
loading={isLoading}
|
||
|
|
onStop={stop}
|
||
|
|
>
|
||
|
|
<ChatInputTextArea placeholder="Type a message..." />
|
||
|
|
<ChatInputSubmit />
|
||
|
|
</ChatInput>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|