89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
|
import { UseChatHelpers } from 'ai/react'
|
||
|
|
import * as React from 'react'
|
||
|
|
import Textarea from 'react-textarea-autosize'
|
||
|
|
|
||
|
|
import { Button, buttonVariants } from '@/components/ui/button'
|
||
|
|
import { IconArrowElbow, IconEdit, IconPlus } from '@/components/ui/icons'
|
||
|
|
import {
|
||
|
|
Tooltip,
|
||
|
|
TooltipContent,
|
||
|
|
TooltipTrigger
|
||
|
|
} from '@/components/ui/tooltip'
|
||
|
|
import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
import { useRouter } from 'next/navigation'
|
||
|
|
|
||
|
|
export interface PromptProps
|
||
|
|
extends Pick<UseChatHelpers, 'input' | 'setInput'> {
|
||
|
|
onSubmit: (value: string) => Promise<void>
|
||
|
|
isLoading: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export function PromptForm({
|
||
|
|
onSubmit,
|
||
|
|
input,
|
||
|
|
setInput,
|
||
|
|
isLoading
|
||
|
|
}: PromptProps) {
|
||
|
|
const { formRef, onKeyDown } = useEnterSubmit()
|
||
|
|
const inputRef = React.useRef<HTMLTextAreaElement>(null)
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
if (inputRef.current) {
|
||
|
|
inputRef.current.focus()
|
||
|
|
}
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form
|
||
|
|
onSubmit={async e => {
|
||
|
|
e.preventDefault()
|
||
|
|
if (!input?.trim()) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
setInput('')
|
||
|
|
await onSubmit(input)
|
||
|
|
}}
|
||
|
|
ref={formRef}
|
||
|
|
>
|
||
|
|
<div className="relative flex max-h-60 w-full grow flex-col overflow-hidden bg-background px-8 sm:rounded-md sm:border sm:px-12">
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
buttonVariants({ size: 'sm', variant: 'ghost' }),
|
||
|
|
'absolute left-0 top-4 h-8 w-8 rounded-full bg-background p-0 hover:bg-background sm:left-4'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<IconEdit />
|
||
|
|
</span>
|
||
|
|
<Textarea
|
||
|
|
ref={inputRef}
|
||
|
|
tabIndex={0}
|
||
|
|
onKeyDown={onKeyDown}
|
||
|
|
rows={1}
|
||
|
|
value={input}
|
||
|
|
onChange={e => setInput(e.target.value)}
|
||
|
|
placeholder="Ask a question."
|
||
|
|
spellCheck={false}
|
||
|
|
className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
|
||
|
|
/>
|
||
|
|
<div className="absolute right-0 top-4 sm:right-4">
|
||
|
|
<Tooltip>
|
||
|
|
<TooltipTrigger asChild>
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
size="icon"
|
||
|
|
disabled={isLoading || input === ''}
|
||
|
|
>
|
||
|
|
<IconArrowElbow />
|
||
|
|
<span className="sr-only">Send message</span>
|
||
|
|
</Button>
|
||
|
|
</TooltipTrigger>
|
||
|
|
<TooltipContent>Send message</TooltipContent>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
}
|