91 lines
1.9 KiB
TypeScript
91 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import type { TodoAgentResponseEvent, TodoAgentToolEvent } from '~/agents/todo'
|
|
import { useSession } from '~/auth/client'
|
|
import { ChatBox } from '~/components/ChatBox'
|
|
import { AssistantMessage, ToolMessage, UserMessage } from '~/components/Message'
|
|
|
|
import { useEvents } from '~/events/client'
|
|
import { sendMessage } from './ai'
|
|
|
|
type Message =
|
|
| TodoAgentToolEvent
|
|
| TodoAgentResponseEvent
|
|
| {
|
|
id: string
|
|
type: 'user_message'
|
|
message: string
|
|
}
|
|
|
|
function MessageSwitch({ message }: { message: Message }) {
|
|
switch (message.type) {
|
|
case 'user_message': {
|
|
return <UserMessage>{message.message}</UserMessage>
|
|
}
|
|
|
|
case 'assistant_message': {
|
|
return <AssistantMessage>{message.message.response}</AssistantMessage>
|
|
}
|
|
case 'function_call': {
|
|
return (
|
|
<ToolMessage
|
|
name={message.name}
|
|
args={JSON.stringify(message.arguments)}
|
|
result={JSON.stringify(message.result)}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
function ChatMessages({
|
|
userId,
|
|
messages,
|
|
addMessage
|
|
}: {
|
|
userId: string
|
|
messages: Message[]
|
|
addMessage: (message: Message) => void
|
|
}) {
|
|
useEvents({
|
|
id: userId,
|
|
on: {
|
|
assistant_message: addMessage
|
|
}
|
|
})
|
|
|
|
return (
|
|
<div className="pb-16">
|
|
{messages.map(message => (
|
|
<MessageSwitch key={message.id} message={message} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function Chat() {
|
|
const { userId } = useSession()
|
|
const [messages, setMessages] = useState<Message[]>([])
|
|
|
|
function addMessage(message: Message) {
|
|
setMessages(prev => [...prev, message])
|
|
}
|
|
|
|
function handleSubmit(message: string) {
|
|
addMessage({
|
|
id: Date.now().toString(),
|
|
message,
|
|
type: 'user_message'
|
|
})
|
|
sendMessage({ message, userId })
|
|
}
|
|
|
|
return (
|
|
<div className="w-full">
|
|
<ChatMessages userId={userId} messages={messages} addMessage={addMessage} />
|
|
<ChatBox placeholder="What is my todo list?" submit={handleSubmit} />
|
|
</div>
|
|
)
|
|
}
|