| 39 | * Example prompts container with default prompts |
| 40 | */ |
| 41 | export function ExamplePrompts({ |
| 42 | onPromptClick, |
| 43 | prompts = [ |
| 44 | { |
| 45 | text: "Create a JavaScript script", |
| 46 | prompt: |
| 47 | "Create a simple JavaScript script that calculates the Fibonacci sequence and save it to a file", |
| 48 | }, |
| 49 | { |
| 50 | text: "Edit a document in VS Code", |
| 51 | prompt: |
| 52 | "Open VS Code and create a simple React component that displays a counter", |
| 53 | }, |
| 54 | { |
| 55 | text: "Browse GitHub", |
| 56 | prompt: |
| 57 | "Open Firefox and go to GitHub to search for popular machine learning repositories", |
| 58 | }, |
| 59 | { |
| 60 | text: "Create a spreadsheet", |
| 61 | prompt: |
| 62 | "Open LibreOffice Calc and create a simple budget spreadsheet with formulas", |
| 63 | }, |
| 64 | ], |
| 65 | disabled = false, |
| 66 | className, |
| 67 | }: ExamplePromptsProps) { |
| 68 | return ( |
| 69 | <div |
| 70 | className={cn( |
| 71 | "flex flex-col items-center gap-3 sm:gap-4 mx-auto my-4 sm:my-6 w-full max-w-[600px] px-4", |
| 72 | className |
| 73 | )} |
| 74 | > |
| 75 | <div className="flex items-center gap-2 text-accent"> |
| 76 | <Terminal className="w-4 h-4" /> |
| 77 | <span className="text-sm font-mono">Try these examples</span> |
| 78 | </div> |
| 79 | <div className="flex flex-wrap gap-2 justify-center w-full px-2 sm:px-0 pb-2 overflow-x-auto scrollbar-thin scrollbar-thumb-[#EBEBEB] dark:scrollbar-thumb-[#333333] scrollbar-track-transparent"> |
| 80 | {prompts.map((item, index) => ( |
| 81 | <ExamplePrompt |
| 82 | key={index} |
| 83 | text={item.text} |
| 84 | onClick={() => onPromptClick(item.prompt)} |
| 85 | disabled={disabled} |
| 86 | /> |
| 87 | ))} |
| 88 | </div> |
| 89 | </div> |
| 90 | ); |
| 91 | } |