Spaces:
Running
Running
File size: 2,013 Bytes
220a682 ebde7f4 220a682 ebde7f4 220a682 0beab82 220a682 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import type React from "react";
import { DEFAULT_EXAMPLES, type Example } from "../constants/examples";
interface ExamplePromptsProps {
examples?: Example[];
onExampleClick: (messageText: string) => void;
}
const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
examples,
onExampleClick,
}) => {
// If examples are provided, use them. Otherwise, generate from enabled tools.
let dynamicExamples = examples;
if (!dynamicExamples) {
// Try to get tools from props (if passed as examples)
dynamicExamples = undefined;
}
// If still undefined, fallback to DEFAULT_EXAMPLES
if (!dynamicExamples) {
dynamicExamples = DEFAULT_EXAMPLES;
}
return (
<div className="flex flex-col items-center justify-center h-full space-y-6">
<div className="text-center mb-6">
<h2 className="text-2xl font-semibold text-gray-300 mb-1">
Try an example
</h2>
<p className="text-sm text-gray-500">Click one to get started</p>
</div>
<div className={`grid gap-3 max-w-4xl w-full px-4 ${
dynamicExamples.length === 1
? 'grid-cols-1 justify-items-center'
: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
}`}>
{dynamicExamples.map((example, index) => (
<button
key={index}
onClick={() => onExampleClick(example.messageText)}
className={`flex items-start gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer ${
dynamicExamples.length === 1 ? 'max-w-md' : ''
}`}
>
<span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform">
{example.icon}
</span>
<span className="text-sm text-gray-200 group-hover:text-white transition-colors break-words line-clamp-3">
{example.displayText}
</span>
</button>
))}
</div>
</div>
);
};
export default ExamplePrompts;
|