diff --git a/index.html b/index.html index e4480ca..9bea1cb 100644 --- a/index.html +++ b/index.html @@ -23,6 +23,11 @@ + diff --git a/src/App.css b/src/App.css index eac26c9..b435782 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,10 @@ html, body, #root { font-family: 'Quicksand', sans-serif; } +html{ + scroll-behavior: smooth; +} + @keyframes logo-spin { from { transform: rotate(0deg); diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx index 5347c30..f86698c 100644 --- a/src/components/ChatInterface.tsx +++ b/src/components/ChatInterface.tsx @@ -16,7 +16,9 @@ const prompts = [ "What can you help me with?", "What is MCP?", "Who is this for?", - "Show me how I can earn" + "Show me how I can earn", + "Developers", + "Sample MCPs" ]; const ChatInterface: React.FC = ({ onPromptSelect, isExpanded }) => { @@ -24,30 +26,111 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande const [inputValue, setInputValue] = useState(''); const [isThinking, setIsThinking] = useState(false); const [chatKey, setChatKey] = useState(0); + const [thinkingStage, setThinkingStage] = useState<"thinking" | "memory" | null>(null); const scrollAnchorRef = useRef(null); - const handlePromptClick = (prompt: string) => { - setMessages(prev => [...prev, { text: prompt, isUser: true }]); + const promptPatterns = [ + { + pattern: /(how|what).*?(help|useful|do|job|use\s+you\s+for|offer|can\s+you\s+do)/i, + prompt: "What can you help me with?", + }, + { + pattern: /(what('| i)?s|define|explain|tell\s+me\s+about).*\b(mcp)\b/i, + prompt: "What is MCP?", + }, + { + pattern: /(who|whom).*?(for|use\s+this|is\s+this\s+platform\s+for|can\s+use)/i, + prompt: "Who is this for?", + }, + { + pattern: /(how|what|can\s+i|is\s+there).*?(earn|moneti[sz]e|money|income|revenue|make\s+money)/i, + prompt: "Show me how I can earn", + }, + { + pattern: /(dev|developers|developed|people)/i, + prompt: "Developers", + }, + { + pattern: /\b(sample|example|show|some)\b.*\b(mcp|mcp server|mcp servers|mcps)\b|\b(mcp|mcp server|mcp servers|mcps)\b.*\b(sample|example|show|some)\b/i, + prompt: "Sample MCPs", + }, + ]; + + + const promptResponses: Record = { + "What can you help me with?": "I can assist you with understanding MCP, exploring features, and showing you how to earn with MCP. Let me show you in a detailed view.", + "What is MCP?": "MCP stands for Monetizable Code Package. It's a wrapper on an API that works with LLMs, making AI behaviors easy to deploy and monetize. Would you like to see it in a detailed view on the right?", + "Who is this for?": "MCP is for developers, creators, and businesses who want to build, deploy, and monetize AI-powered code packages easily. Here's a detailed view.", + "Show me how I can earn": "You can earn by creating MCPs, deploying them, and setting your pricing. Track usage and get paid automatically as others use your MCPs. I have generated a detailed view on the right.", + "Developers": "A lot of people have put there thoughts and ideas to bring this amazing idea to life. Here on the right I have displayed all the developers who are behind Fastcode.", + "Sample MCPs": "People all over the world are building MCP servers and earning passively. It's time you start you own as well. Here are some samples for your inspiration." + }; + + const handlePromptClick = (prompt: string, userInput?: string) => { + setMessages(prev => [...prev, { text: userInput || prompt, isUser: true }]); + setThinkingStage("thinking"); setIsThinking(true); - + setTimeout(() => { - setIsThinking(false); - setMessages(prev => [...prev, { text: `Let me show you detailed information about "${prompt}"`, isUser: false, isTyping: true }]); - + setThinkingStage("memory"); setTimeout(() => { - const content = getPromptContent(prompt); - onPromptSelect(prompt, content); - }, 1500); - }, 1000); + setIsThinking(false); + setThinkingStage(null); + setMessages(prev => [ + ...prev, + { + text: promptResponses[prompt] || `Let me show you detailed information about "${prompt}"`, + isUser: false, + isTyping: true, + }, + ]); + setTimeout(() => { + const content = getPromptContent(prompt); + onPromptSelect(prompt, content); + }, 9000); + }, 1000); // "Activating memory..." duration + }, 1000); // "Thinking..." duration }; const handleSendMessage = () => { if (!inputValue.trim()) return; - const prompt = inputValue; + + const userMessage = { + text: inputValue, + isUser: true, + }; + setMessages(prev => [...prev, userMessage]); + + const matched = promptPatterns.find(({ pattern }) => pattern.test(inputValue)); + const promptToUse = matched ? matched.prompt : inputValue; + setInputValue(''); - handlePromptClick(prompt); + setThinkingStage("thinking"); + setIsThinking(true); + + setTimeout(() => { + setThinkingStage("memory"); + setTimeout(() => { + setIsThinking(false); + setThinkingStage(null); + setMessages(prev => [ + ...prev, + { + text: promptResponses[promptToUse] || `Let me show you detailed information about "${promptToUse}"`, + isUser: false, + isTyping: true, + }, + ]); + setTimeout(() => { + const content = getPromptContent(promptToUse); + onPromptSelect(promptToUse, content); + }, 9000); + }, 1000); + }, 1000); }; + + const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === 'Enter') handleSendMessage(); }; @@ -64,13 +147,11 @@ const ChatInterface: React.FC = ({ onPromptSelect, isExpande }, []); useEffect(() => { - if (scrollAnchorRef.current) { - scrollAnchorRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' }); - } - }, [messages, isThinking]); + scrollAnchorRef.current?.scrollIntoView({ behavior: 'smooth', block:'end' }); + }, [messages]); return ( -
+
{/* Hero Section */} {messages.length === 0 && (
= ({ onPromptSelect, isExpande How can I help you today?
- {prompts.map((prompt, index) => ( + {prompts.slice(0, 4).map((prompt, index) => (