109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
|
import { PromptForm } from '@/components/prompt-form'
|
|
import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
|
|
import { IconRefresh, IconSpinner, IconStop } from '@/components/ui/icons'
|
|
import { functionSchemas } from '@/lib/functions/schemas'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { FadeIn } from './landing/fade-in'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { UseChatHelpers } from '@aigxion/isdk/react'
|
|
|
|
|
|
|
|
export interface ChatPanelProps
|
|
extends Pick<
|
|
UseChatHelpers,
|
|
| 'append'
|
|
| 'isLoading'
|
|
| 'reload'
|
|
| 'messages'
|
|
| 'stop'
|
|
| 'input'
|
|
| 'setInput'
|
|
> {
|
|
id?: string
|
|
}
|
|
|
|
export function ChatPanel({
|
|
id,
|
|
isLoading,
|
|
stop,
|
|
append,
|
|
reload,
|
|
input,
|
|
setInput,
|
|
messages
|
|
}: ChatPanelProps) {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
console.log("messages : ", messages)
|
|
return (
|
|
<div
|
|
className={cn(
|
|
// " inset-x-0 bg-gradient-to-b from-muted/10 from-10% to-muted/0.3 fixed bottom-0",
|
|
"fixed inset-x-0 bottom-[0rem] bg-gradient-to-b from-muted/10 from-10% to-muted/30 to-50% bg-[#fff]",
|
|
// messages.length > 1 ? 'fixed bottom-0 bg-[#f6f6f6] z-[999]' : "absolute bg-[#fff]"
|
|
)}
|
|
|
|
// style={{
|
|
// top: messages.length > 1 ? 'auto' : "180px",
|
|
// // backgroundColor: messages.length > 1 ? '#fff' : "",
|
|
// }}
|
|
>
|
|
{/* <ButtonScrollToBottom /> */}
|
|
|
|
<div className="mx-auto sm:max-w-2xl sm:px-4 ">
|
|
{/* <div className="flex h-10 items-center justify-center">
|
|
{isLoading ? (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => stop()}
|
|
className="bg-background"
|
|
>
|
|
<IconSpinner className="mr-2 animate-spin" />
|
|
Stop generating
|
|
</Button>
|
|
) : (
|
|
messages?.length > 1 && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => reload({
|
|
functions: functionSchemas
|
|
})}
|
|
className="bg-background"
|
|
>
|
|
<IconRefresh className="mr-2" />
|
|
Regenerate response
|
|
</Button>
|
|
)
|
|
)}
|
|
</div> */}
|
|
{/* <div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4"> */}
|
|
<div className="space-y-4 px-4 py-2 ">
|
|
<PromptForm
|
|
onSubmit={async value => {
|
|
await new Promise(r => setTimeout(r, 300));
|
|
await append(
|
|
{
|
|
id,
|
|
content: value,
|
|
role: 'user',
|
|
action: "chat",
|
|
type: 'text',
|
|
},
|
|
{ functions: functionSchemas }
|
|
)
|
|
}}
|
|
input={input}
|
|
setInput={setInput}
|
|
isLoading={isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
}
|