61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from '../ui-v2/button'
|
|
import { Input } from '../ui-v2/input'
|
|
import { useActions, useUIState } from '@aigxion/isdk/rsc'
|
|
import type { AI } from '@/app/[locale]/morphic/action'
|
|
import { UserMessage } from './user-message'
|
|
import { ArrowRight } from 'lucide-react'
|
|
|
|
export function FollowupPanel() {
|
|
const [input, setInput] = useState('')
|
|
const { submit } = useActions<typeof AI>()
|
|
const [, setMessages] = useUIState<typeof AI>()
|
|
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
const formData = new FormData(event.currentTarget as HTMLFormElement)
|
|
|
|
const userMessage = {
|
|
id: Date.now(),
|
|
isGenerating: false,
|
|
component: <UserMessage message={input} isFirstMessage={false} />
|
|
}
|
|
|
|
const responseMessage = await submit(formData)
|
|
setMessages(currentMessages => [
|
|
...currentMessages,
|
|
userMessage,
|
|
responseMessage
|
|
])
|
|
|
|
setInput('')
|
|
}
|
|
|
|
return (
|
|
<form
|
|
onSubmit={handleSubmit}
|
|
className="relative flex items-center space-x-1"
|
|
>
|
|
<Input
|
|
type="text"
|
|
name="input"
|
|
placeholder="Ask a follow-up question..."
|
|
value={input}
|
|
className="pr-14 h-12"
|
|
onChange={e => setInput(e.target.value)}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
size={'icon'}
|
|
disabled={input.length === 0}
|
|
variant={'ghost'}
|
|
className="absolute right-1"
|
|
>
|
|
<ArrowRight size={20} />
|
|
</Button>
|
|
</form>
|
|
)
|
|
}
|