| 1 | 'use client' |
| 2 | |
| 3 | import * as React from 'react' |
| 4 | import { type UseChatHelpers } from 'ai/react' |
| 5 | |
| 6 | import { PromptForm } from './prompt-form' |
| 7 | |
| 8 | export interface ChatPanelProps |
| 9 | extends Pick< |
| 10 | UseChatHelpers, |
| 11 | | 'append' |
| 12 | | 'isLoading' |
| 13 | | 'reload' |
| 14 | | 'messages' |
| 15 | | 'stop' |
| 16 | | 'input' |
| 17 | | 'setInput' |
| 18 | > { |
| 19 | id?: string |
| 20 | title?: string |
| 21 | } |
| 22 | |
| 23 | export function ChatPanel({ |
| 24 | id, |
| 25 | title, |
| 26 | isLoading, |
| 27 | stop, |
| 28 | append, |
| 29 | reload, |
| 30 | input, |
| 31 | setInput, |
| 32 | messages |
| 33 | }: ChatPanelProps) { |
| 34 | const [shareDialogOpen, setShareDialogOpen] = React.useState(false) |
| 35 | |
| 36 | return ( |
| 37 | <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% animate-in duration-300 ease-in-out dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]"> |
| 38 | <div className="mx-auto sm:max-w-2xl sm:px-4"> |
| 39 | <div className="flex items-center justify-center h-12"></div> |
| 40 | <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4"> |
| 41 | <PromptForm |
| 42 | onSubmit={async value => { |
| 43 | await append({ |
| 44 | id, |
| 45 | content: value, |
| 46 | role: 'user' |
| 47 | }) |
| 48 | }} |
| 49 | input={input} |
| 50 | setInput={setInput} |
| 51 | isLoading={isLoading} |
| 52 | /> |
| 53 | </div> |
| 54 | </div> |
| 55 | </div> |
| 56 | ) |
| 57 | } |