LiquidAI/LFM2-MCP

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