46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { ExternalLink } from '@/components/external-link'
|
||
|
|
import { UseChatHelpers } from 'ai-connector'
|
||
|
|
import { PromptForm } from './prompt-form'
|
||
|
|
|
||
|
|
export interface ChatPanelProps
|
||
|
|
extends Pick<UseChatHelpers, 'append' | 'isLoading' | 'reload' | 'messages'> {
|
||
|
|
id?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ChatPanel({
|
||
|
|
id,
|
||
|
|
append,
|
||
|
|
isLoading,
|
||
|
|
reload,
|
||
|
|
messages
|
||
|
|
}: ChatPanelProps) {
|
||
|
|
return (
|
||
|
|
<div className="fixed bottom-0 left-0 right-0">
|
||
|
|
<div className="max-w-2xl mx-auto">
|
||
|
|
<div className="px-4 py-2 border space-y-4 shadow-lg bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-lg rounded-t-xl">
|
||
|
|
<PromptForm
|
||
|
|
onSubmit={value => {
|
||
|
|
append({
|
||
|
|
content: value,
|
||
|
|
role: 'user'
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
onRefresh={messages.length ? reload : undefined}
|
||
|
|
isLoading={isLoading}
|
||
|
|
/>
|
||
|
|
<p className="text-muted-foreground text-xs leading-normal text-center pb-1">
|
||
|
|
This is an open source AI chatbot app built with{' '}
|
||
|
|
<ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '}
|
||
|
|
<ExternalLink href="https://vercel.com/storage/kv">
|
||
|
|
Vercel KV
|
||
|
|
</ExternalLink>
|
||
|
|
.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|