@codebakers/mcp 5.4.3 → 5.4.4

package/dist/tools/generate-chatbot.js

@@ -173,324 +173,324 @@ async function indexPages(dir, routePath, pages) {
     }
 }
 async function generateChatbotComponent(cwd, knowledge, position) {
-    const component = `'use client';
-
-import { useState, useRef, useEffect } from 'react';
-
-interface Message {
-  role: 'user' | 'assistant';
-  content: string;
-}
-
-export default function HelpChatbot() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([
-    {
-      role: 'assistant',
-      content: 'Hi! I\\'m your AI assistant. I know everything about this app and can help you navigate features, answer questions, or troubleshoot issues. What can I help you with?'
-    }
-  ]);
-  const [input, setInput] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
-
-  const sendMessage = async () => {
-    if (!input.trim() || isLoading) return;
-
-    const userMessage: Message = { role: 'user', content: input };
-    setMessages(prev => [...prev, userMessage]);
-    setInput('');
-    setIsLoading(true);
-
-    try {
-      const response = await fetch('/api/chatbot', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ message: input })
-      });
-
-      const data = await response.json();
-
-      const assistantMessage: Message = {
-        role: 'assistant',
-        content: data.response || 'Sorry, I couldn\\'t process that request.'
-      };
-
-      setMessages(prev => [...prev, assistantMessage]);
-    } catch (error) {
-      const errorMessage: Message = {
-        role: 'assistant',
-        content: 'Sorry, I encountered an error. Please try again.'
-      };
-      setMessages(prev => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      sendMessage();
-    }
-  };
-
-  const positionClasses = {
-    'bottom-right': 'bottom-4 right-4',
-    'bottom-left': 'bottom-4 left-4',
-    'sidebar': 'top-20 right-4'
-  };
-
-  return (
-    <>
-      {/* Chat Button */}
-      {!isOpen && (
-        <button
-          onClick={() => setIsOpen(true)}
-          className={\`fixed \${positionClasses['${position}']} z-50 bg-blue-600 text-white rounded-full p-4 shadow-lg hover:bg-blue-700 transition-all\`}
-          aria-label="Open help chat"
-        >
-          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-          </svg>
-        </button>
-      )}
-
-      {/* Chat Window */}
-      {isOpen && (
-        <div className={\`fixed \${positionClasses['${position}']} z-50 w-96 h-[500px] bg-white border border-gray-200 rounded-lg shadow-xl flex flex-col\`}>
-          {/* Header */}
-          <div className="flex items-center justify-between p-4 border-b bg-blue-600 text-white rounded-t-lg">
-            <div className="flex items-center gap-2">
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-              </svg>
-              <h3 className="font-semibold">Help Assistant</h3>
-            </div>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="hover:bg-blue-700 rounded p-1 transition-colors"
-              aria-label="Close chat"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-
-          {/* Messages */}
-          <div className="flex-1 overflow-y-auto p-4 space-y-4">
-            {messages.map((message, index) => (
-              <div
-                key={index}
-                className={\`flex \${message.role === 'user' ? 'justify-end' : 'justify-start'}\`}
-              >
-                <div
-                  className={\`max-w-[80%] rounded-lg px-4 py-2 \${
-                    message.role === 'user'
-                      ? 'bg-blue-600 text-white'
-                      : 'bg-gray-100 text-gray-900'
-                  }\`}
-                >
-                  <p className="text-sm whitespace-pre-wrap">{message.content}</p>
-                </div>
-              </div>
-            ))}
-            {isLoading && (
-              <div className="flex justify-start">
-                <div className="bg-gray-100 rounded-lg px-4 py-2">
-                  <div className="flex gap-1">
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
-                  </div>
-                </div>
-              </div>
-            )}
-            <div ref={messagesEndRef} />
-          </div>
-
-          {/* Input */}
-          <div className="p-4 border-t">
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                onKeyPress={handleKeyPress}
-                placeholder="Ask me anything..."
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                disabled={isLoading}
-              />
-              <button
-                onClick={sendMessage}
-                disabled={!input.trim() || isLoading}
-                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-              >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
+    const component = `'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export default function HelpChatbot() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      role: 'assistant',
+      content: 'Hi! I\\'m your AI assistant. I know everything about this app and can help you navigate features, answer questions, or troubleshoot issues. What can I help you with?'
+    }
+  ]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const sendMessage = async () => {
+    if (!input.trim() || isLoading) return;
+
+    const userMessage: Message = { role: 'user', content: input };
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/chatbot', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: input })
+      });
+
+      const data = await response.json();
+
+      const assistantMessage: Message = {
+        role: 'assistant',
+        content: data.response || 'Sorry, I couldn\\'t process that request.'
+      };
+
+      setMessages(prev => [...prev, assistantMessage]);
+    } catch (error) {
+      const errorMessage: Message = {
+        role: 'assistant',
+        content: 'Sorry, I encountered an error. Please try again.'
+      };
+      setMessages(prev => [...prev, errorMessage]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  const positionClasses = {
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'sidebar': 'top-20 right-4'
+  };
+
+  return (
+    <>
+      {/* Chat Button */}
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          className={\`fixed \${positionClasses['${position}']} z-50 bg-blue-600 text-white rounded-full p-4 shadow-lg hover:bg-blue-700 transition-all\`}
+          aria-label="Open help chat"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+          </svg>
+        </button>
+      )}
+
+      {/* Chat Window */}
+      {isOpen && (
+        <div className={\`fixed \${positionClasses['${position}']} z-50 w-96 h-[500px] bg-white border border-gray-200 rounded-lg shadow-xl flex flex-col\`}>
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b bg-blue-600 text-white rounded-t-lg">
+            <div className="flex items-center gap-2">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+              </svg>
+              <h3 className="font-semibold">Help Assistant</h3>
+            </div>
+            <button
+              onClick={() => setIsOpen(false)}
+              className="hover:bg-blue-700 rounded p-1 transition-colors"
+              aria-label="Close chat"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Messages */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            {messages.map((message, index) => (
+              <div
+                key={index}
+                className={\`flex \${message.role === 'user' ? 'justify-end' : 'justify-start'}\`}
+              >
+                <div
+                  className={\`max-w-[80%] rounded-lg px-4 py-2 \${
+                    message.role === 'user'
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-100 text-gray-900'
+                  }\`}
+                >
+                  <p className="text-sm whitespace-pre-wrap">{message.content}</p>
+                </div>
+              </div>
+            ))}
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-gray-100 rounded-lg px-4 py-2">
+                  <div className="flex gap-1">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></div>
+                  </div>
+                </div>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input */}
+          <div className="p-4 border-t">
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Ask me anything..."
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                disabled={isLoading}
+              />
+              <button
+                onClick={sendMessage}
+                disabled={!input.trim() || isLoading}
+                className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
 `;
     const componentPath = path.join(cwd, 'src', 'components', 'HelpChatbot.tsx');
     await fs.mkdir(path.dirname(componentPath), { recursive: true });
     await fs.writeFile(componentPath, component, 'utf-8');
 }
 async function generateKnowledgeBase(cwd, knowledge) {
-    const knowledgeFile = `// Auto-generated knowledge base for AI chatbot
-// This file contains indexed information about the app
-
-export const appKnowledge = ${JSON.stringify(knowledge, null, 2)};
-
-export function searchKnowledge(query: string): any[] {
-  const results: any[] = [];
-  const lowerQuery = query.toLowerCase();
-
-  // Search features
-  for (const feature of appKnowledge.features) {
-    if (feature.name.toLowerCase().includes(lowerQuery)) {
-      results.push({
-        type: 'feature',
-        relevance: 0.9,
-        data: feature
-      });
-    }
-  }
-
-  // Search API routes
-  for (const route of appKnowledge.api_routes) {
-    if (route.path.toLowerCase().includes(lowerQuery)) {
-      results.push({
-        type: 'api',
-        relevance: 0.8,
-        data: route
-      });
-    }
-  }
-
-  // Search components
-  for (const component of appKnowledge.components) {
-    if (component.name.toLowerCase().includes(lowerQuery)) {
-      results.push({
-        type: 'component',
-        relevance: 0.7,
-        data: component
-      });
-    }
-  }
-
-  // Search common tasks
-  for (const task of appKnowledge.common_tasks) {
-    if (task.task.toLowerCase().includes(lowerQuery) || task.answer.toLowerCase().includes(lowerQuery)) {
-      results.push({
-        type: 'task',
-        relevance: 1.0,
-        data: task
-      });
-    }
-  }
-
-  return results.sort((a, b) => b.relevance - a.relevance).slice(0, 5);
-}
+    const knowledgeFile = `// Auto-generated knowledge base for AI chatbot
+// This file contains indexed information about the app
+
+export const appKnowledge = ${JSON.stringify(knowledge, null, 2)};
+
+export function searchKnowledge(query: string): any[] {
+  const results: any[] = [];
+  const lowerQuery = query.toLowerCase();
+
+  // Search features
+  for (const feature of appKnowledge.features) {
+    if (feature.name.toLowerCase().includes(lowerQuery)) {
+      results.push({
+        type: 'feature',
+        relevance: 0.9,
+        data: feature
+      });
+    }
+  }
+
+  // Search API routes
+  for (const route of appKnowledge.api_routes) {
+    if (route.path.toLowerCase().includes(lowerQuery)) {
+      results.push({
+        type: 'api',
+        relevance: 0.8,
+        data: route
+      });
+    }
+  }
+
+  // Search components
+  for (const component of appKnowledge.components) {
+    if (component.name.toLowerCase().includes(lowerQuery)) {
+      results.push({
+        type: 'component',
+        relevance: 0.7,
+        data: component
+      });
+    }
+  }
+
+  // Search common tasks
+  for (const task of appKnowledge.common_tasks) {
+    if (task.task.toLowerCase().includes(lowerQuery) || task.answer.toLowerCase().includes(lowerQuery)) {
+      results.push({
+        type: 'task',
+        relevance: 1.0,
+        data: task
+      });
+    }
+  }
+
+  return results.sort((a, b) => b.relevance - a.relevance).slice(0, 5);
+}
 `;
     const knowledgePath = path.join(cwd, 'src', 'lib', 'chatbot-knowledge.ts');
     await fs.mkdir(path.dirname(knowledgePath), { recursive: true });
     await fs.writeFile(knowledgePath, knowledgeFile, 'utf-8');
 }
 async function generateChatbotAPI(cwd) {
-    const apiRoute = `import { NextRequest, NextResponse } from 'next/server';
-import { searchKnowledge, appKnowledge } from '@/lib/chatbot-knowledge';
-
-export async function POST(request: NextRequest) {
-  try {
-    const { message } = await request.json();
-
-    if (!message) {
-      return NextResponse.json({ error: 'Message is required' }, { status: 400 });
-    }
-
-    // Search knowledge base
-    const relevantInfo = searchKnowledge(message);
-
-    // Generate response based on relevant information
-    let response = generateResponse(message, relevantInfo);
-
-    return NextResponse.json({ response });
-  } catch (error) {
-    console.error('Chatbot API error:', error);
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    );
-  }
-}
-
-function generateResponse(message: string, relevantInfo: any[]): string {
-  const lowerMessage = message.toLowerCase();
-
-  // Handle common greetings
-  if (lowerMessage.match(/^(hi|hello|hey)/)) {
-    return "Hello! I'm your AI assistant. I know everything about this app. What would you like to know?";
-  }
-
-  // Handle feature questions
-  if (lowerMessage.includes('feature') || lowerMessage.includes('can i')) {
-    const features = relevantInfo.filter(i => i.type === 'feature');
-    if (features.length > 0) {
-      return \`Yes! We have that feature. Available features include: \${features.map(f => f.data.name).join(', ')}. Would you like to know more about any of these?\`;
-    }
-  }
-
-  // Handle navigation questions
-  if (lowerMessage.includes('how do i') || lowerMessage.includes('where')) {
-    const tasks = relevantInfo.filter(i => i.type === 'task');
-    if (tasks.length > 0) {
-      return tasks[0].data.answer;
-    }
-  }
-
-  // Handle API questions
-  if (lowerMessage.includes('api') || lowerMessage.includes('endpoint')) {
-    const apis = relevantInfo.filter(i => i.type === 'api');
-    if (apis.length > 0) {
-      return \`We have these API endpoints: \${apis.map(a => \`\${a.data.path} (\${a.data.methods.join(', ')})\`).join(', ')}.\`;
-    }
-  }
-
-  // Generic response with relevant info
-  if (relevantInfo.length > 0) {
-    const topResult = relevantInfo[0];
-
-    switch (topResult.type) {
-      case 'feature':
-        return \`I found information about "\${topResult.data.name}". This is a \${topResult.data.priority} priority feature. Is this what you're looking for?\`;
-      case 'component':
-        return \`I found the \${topResult.data.name} component. It's located in \${topResult.data.file}. What would you like to know about it?\`;
-      case 'api':
-        return \`The API endpoint \${topResult.data.path} supports these methods: \${topResult.data.methods.join(', ')}.\`;
-      case 'task':
-        return topResult.data.answer;
-    }
-  }
-
-  // Fallback response
-  return \`I'm not sure about that. Could you rephrase your question? I can help with:
-- App features and capabilities
-- How to use specific functions
-- Navigation and settings
-- General questions about the app\`;
-}
+    const apiRoute = `import { NextRequest, NextResponse } from 'next/server';
+import { searchKnowledge, appKnowledge } from '@/lib/chatbot-knowledge';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { message } = await request.json();
+
+    if (!message) {
+      return NextResponse.json({ error: 'Message is required' }, { status: 400 });
+    }
+
+    // Search knowledge base
+    const relevantInfo = searchKnowledge(message);
+
+    // Generate response based on relevant information
+    let response = generateResponse(message, relevantInfo);
+
+    return NextResponse.json({ response });
+  } catch (error) {
+    console.error('Chatbot API error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+
+function generateResponse(message: string, relevantInfo: any[]): string {
+  const lowerMessage = message.toLowerCase();
+
+  // Handle common greetings
+  if (lowerMessage.match(/^(hi|hello|hey)/)) {
+    return "Hello! I'm your AI assistant. I know everything about this app. What would you like to know?";
+  }
+
+  // Handle feature questions
+  if (lowerMessage.includes('feature') || lowerMessage.includes('can i')) {
+    const features = relevantInfo.filter(i => i.type === 'feature');
+    if (features.length > 0) {
+      return \`Yes! We have that feature. Available features include: \${features.map(f => f.data.name).join(', ')}. Would you like to know more about any of these?\`;
+    }
+  }
+
+  // Handle navigation questions
+  if (lowerMessage.includes('how do i') || lowerMessage.includes('where')) {
+    const tasks = relevantInfo.filter(i => i.type === 'task');
+    if (tasks.length > 0) {
+      return tasks[0].data.answer;
+    }
+  }
+
+  // Handle API questions
+  if (lowerMessage.includes('api') || lowerMessage.includes('endpoint')) {
+    const apis = relevantInfo.filter(i => i.type === 'api');
+    if (apis.length > 0) {
+      return \`We have these API endpoints: \${apis.map(a => \`\${a.data.path} (\${a.data.methods.join(', ')})\`).join(', ')}.\`;
+    }
+  }
+
+  // Generic response with relevant info
+  if (relevantInfo.length > 0) {
+    const topResult = relevantInfo[0];
+
+    switch (topResult.type) {
+      case 'feature':
+        return \`I found information about "\${topResult.data.name}". This is a \${topResult.data.priority} priority feature. Is this what you're looking for?\`;
+      case 'component':
+        return \`I found the \${topResult.data.name} component. It's located in \${topResult.data.file}. What would you like to know about it?\`;
+      case 'api':
+        return \`The API endpoint \${topResult.data.path} supports these methods: \${topResult.data.methods.join(', ')}.\`;
+      case 'task':
+        return topResult.data.answer;
+    }
+  }
+
+  // Fallback response
+  return \`I'm not sure about that. Could you rephrase your question? I can help with:
+- App features and capabilities
+- How to use specific functions
+- Navigation and settings
+- General questions about the app\`;
+}
 `;
     const apiPath = path.join(cwd, 'src', 'app', 'api', 'chatbot', 'route.ts');
     await fs.mkdir(path.dirname(apiPath), { recursive: true });