139 lines
4.5 KiB
TypeScript
139 lines
4.5 KiB
TypeScript
import * as React from 'react'
|
|
|
|
import { shareChat } from '@/app/actions'
|
|
import { Button } from './ui/button'
|
|
import { PromptForm } from './prompt-form'
|
|
import { ButtonScrollToBottom } from './button-scroll-to-bottom'
|
|
import { IconShare } from './ui/icons'
|
|
import { FooterText } from './footer'
|
|
import { ChatShareDialog } from './chat-share-dialog'
|
|
import { useAIState, useActions, useUIState } from '@aigxion/isdk/rsc'
|
|
import type { AI } from '@/lib/chat/actions'
|
|
import { nanoid } from 'nanoid'
|
|
import { UserMessage } from './stocks/message'
|
|
|
|
export interface ChatPanelProps {
|
|
id?: string
|
|
title?: string
|
|
input: string
|
|
setInput: (value: string) => void
|
|
isAtBottom: boolean
|
|
scrollToBottom: () => void
|
|
}
|
|
|
|
export function ChatPanel({
|
|
id,
|
|
title,
|
|
input,
|
|
setInput,
|
|
isAtBottom,
|
|
scrollToBottom
|
|
}: ChatPanelProps) {
|
|
const [aiState] = useAIState()
|
|
const [messages, setMessages] = useUIState<typeof AI>()
|
|
const { submitUserMessage } = useActions()
|
|
const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
|
|
|
|
const exampleMessages = [
|
|
{
|
|
heading: 'What are the',
|
|
subheading: 'trending memecoins today?',
|
|
message: `What are the trending memecoins today?`
|
|
},
|
|
{
|
|
heading: 'What is the price of',
|
|
subheading: '$DOGE right now?',
|
|
message: 'What is the price of $DOGE right now?'
|
|
},
|
|
{
|
|
heading: 'I would like to buy',
|
|
subheading: '42 $DOGE',
|
|
message: `I would like to buy 42 $DOGE`
|
|
},
|
|
{
|
|
heading: 'What are some',
|
|
subheading: `recent events about $DOGE?`,
|
|
message: `What are some recent events about $DOGE?`
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% duration-300 ease-in-out animate-in 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]">
|
|
<ButtonScrollToBottom
|
|
isAtBottom={isAtBottom}
|
|
scrollToBottom={scrollToBottom}
|
|
/>
|
|
|
|
<div className="mx-auto sm:max-w-2xl sm:px-4">
|
|
<div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
|
|
{messages.length === 0 &&
|
|
exampleMessages.map((example, index) => (
|
|
<div
|
|
key={example.heading}
|
|
className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 ${index > 1 && 'hidden md:block'
|
|
}`}
|
|
onClick={async () => {
|
|
setMessages((currentMessages: any) => [
|
|
...currentMessages,
|
|
{
|
|
id: nanoid(),
|
|
display: <UserMessage>{example.message}</UserMessage>
|
|
}
|
|
])
|
|
|
|
const responseMessage = await submitUserMessage(
|
|
example.message
|
|
)
|
|
|
|
setMessages((currentMessages: any) => [
|
|
...currentMessages,
|
|
responseMessage
|
|
])
|
|
}}
|
|
>
|
|
<div className="text-sm font-semibold">{example.heading}</div>
|
|
<div className="text-sm text-zinc-600">
|
|
{example.subheading}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{messages?.length >= 2 ? (
|
|
<div className="flex h-12 items-center justify-center">
|
|
<div className="flex space-x-2">
|
|
{id && title ? (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShareDialogOpen(true)}
|
|
>
|
|
<IconShare className="mr-2" />
|
|
Share
|
|
</Button>
|
|
<ChatShareDialog
|
|
open={shareDialogOpen}
|
|
onOpenChange={setShareDialogOpen}
|
|
onCopy={() => setShareDialogOpen(false)}
|
|
shareChat={shareChat}
|
|
chat={{
|
|
id,
|
|
title,
|
|
messages: aiState.messages
|
|
}}
|
|
/>
|
|
</>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-4 border-t bg-background px-4 py-2 shadow-lg sm:rounded-t-xl sm:border md:py-4">
|
|
<PromptForm input={input} setInput={setInput} />
|
|
<FooterText className="hidden sm:block" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|