| 1 | import { UseChatHelpers } from 'ai/react' |
| 2 | |
| 3 | import { Button } from './button' |
| 4 | import { ExternalLink } from './external-link' |
| 5 | import { IconArrowRight } from './icons' |
| 6 | |
| 7 | const exampleMessages = [ |
| 8 | { |
| 9 | heading: 'Explain technical concepts', |
| 10 | message: `What is a "serverless function"?` |
| 11 | }, |
| 12 | { |
| 13 | heading: 'Summarize an article', |
| 14 | message: 'Summarize the following article for a 2nd grader: \n' |
| 15 | }, |
| 16 | { |
| 17 | heading: 'Draft an email', |
| 18 | message: `Draft an email to my boss about the following: \n` |
| 19 | } |
| 20 | ] |
| 21 | |
| 22 | export function EmptyScreen({ setInput }: Pick<UseChatHelpers, 'setInput'>) { |
| 23 | return ( |
| 24 | <div className="mx-auto max-w-2xl px-4"> |
| 25 | <div className="rounded-lg border bg-background p-8"> |
| 26 | <h1 className="mb-2 text-lg font-semibold"> |
| 27 | Welcome to Next.js AI Chatbot! |
| 28 | </h1> |
| 29 | <p className="mb-2 leading-normal text-muted-foreground"> |
| 30 | This is an open source AI chatbot app template built with{' '} |
| 31 | <ExternalLink href="https://nextjs.org">Next.js</ExternalLink> and{' '} |
| 32 | <ExternalLink href="https://vercel.com/storage/kv"> |
| 33 | Vercel KV |
| 34 | </ExternalLink> |
| 35 | . |
| 36 | </p> |
| 37 | <p className="leading-normal text-muted-foreground"> |
| 38 | You can start a conversation here or try the following examples: |
| 39 | </p> |
| 40 | <div className="mt-4 flex flex-col items-start space-y-2"> |
| 41 | {exampleMessages.map((message, index) => ( |
| 42 | <Button |
| 43 | key={index} |
| 44 | variant="link" |
| 45 | className="h-auto p-0 text-base" |
| 46 | onClick={() => setInput(message.message)} |
| 47 | > |
| 48 | <IconArrowRight className="mr-2 text-muted-foreground" /> |
| 49 | {message.heading} |
| 50 | </Button> |
| 51 | ))} |
| 52 | </div> |
| 53 | </div> |
| 54 | </div> |
| 55 | ) |
| 56 | } |