dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: update chat display and fix issue with regeneration

Browse source
This commit is contained in:
shadcn 2023-06-11 15:08:59 +04:00
parent e06f34b0f1
commit 8f64c55896
17 changed files with 266 additions and 231 deletions
Download patch file Download diff file Expand all files Collapse all files

74
components/empty-screen.tsx
View file

@ -1,10 +1,10 @@
import { ArrowRight } from 'lucide-react'
import { cn } from '@/lib/utils'
import { fontMessage } from '@/lib/fonts'
import { useChatStore } from '@/lib/hooks/use-chat-store'
import { ExternalLink } from '@/components/external-link'
import { Button } from '@/components/ui/button'
import { OpenAI } from '@/components/icons'
const exampleMessages = [
{
@ -25,45 +25,39 @@ export function EmptyScreen({ className }: React.ComponentProps<'div'>) {
const { setDefaultMessage } = useChatStore()
return (
<div className="flex items-start space-x-4 mb-4 -ml-12">
<div
className={cn(
'flex h-8 w-8 shrink-0 items-center justify-center rounded-full select-none border bg-primary text-primary-foreground'
)}
>
<OpenAI className="w-4 h-4" />
</div>
<div
className={cn(
'border rounded-lg flex-1 p-10 bg-gradient-to-b from-background via-muted/10 to-muted/50',
className
)}
>
<h1 className="font-semibold mb-2">Welcome to Next.js Chatbot!</h1>
<p className="text-muted-foreground text-sm leading-normal">
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>
<p className="text-muted-foreground text-sm leading-normal">
You can start a conversation here or try the following examples:
</p>
<div className="text-sm mt-4 flex flex-col items-start space-y-2">
{exampleMessages.map((message, index) => (
<Button
key={index}
variant="link"
className="p-0 h-auto"
onClick={() => setDefaultMessage(message.message)}
>
<ArrowRight className="w-4 h-4 mr-2 text-muted-foreground" />
{message.heading}
</Button>
))}
</div>
<div
className={cn(
'border bg-background p-8 rounded-lg',
fontMessage.className,
className
)}
>
<h1 className="font-semibold text-lg mb-2">
Welcome to Next.js Chatbot!
</h1>
<p className="text-muted-foreground leading-normal mb-2">
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>
<p className="text-muted-foreground leading-normal">
You can start a conversation here or try the following examples:
</p>
<div className="mt-4 flex flex-col items-start space-y-2">
{exampleMessages.map((message, index) => (
<Button
key={index}
variant="link"
className="p-0 h-auto text-base"
onClick={() => setDefaultMessage(message.message)}
>
<ArrowRight className="w-4 h-4 mr-2 text-muted-foreground" />
{message.heading}
</Button>
))}
</div>
</div>
)