|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Chat - PromptCraft AI Assistant</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#ffffff', |
|
|
secondary: '#dc2626' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #262626 100%); |
|
|
} |
|
|
|
|
|
.chat-container { |
|
|
height: calc(100vh - 80px); |
|
|
} |
|
|
|
|
|
.message-bubble { |
|
|
max-width: 80%; |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
|
|
|
.user-message { |
|
|
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.assistant-message { |
|
|
background: rgba(30, 30, 30, 0.8); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.typing-dot { |
|
|
width: 6px; |
|
|
height: 6px; |
|
|
background: #dc2626; |
|
|
border-radius: 50%; |
|
|
margin: 0 2px; |
|
|
animation: typing 1.4s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.typing-dot:nth-child(1) { animation-delay: -0.32s; } |
|
|
.typing-dot:nth-child(2) { animation-delay: -0.16s; } |
|
|
|
|
|
@keyframes typing { |
|
|
0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } |
|
|
40% { transform: scale(1); opacity: 1; } |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.input-field:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.5); |
|
|
} |
|
|
|
|
|
.code-block { |
|
|
background: #1e1e1e; |
|
|
border-left: 4px solid #dc2626; |
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen text-primary"> |
|
|
|
|
|
<nav class="bg-black/50 backdrop-blur-lg border-b border-gray-800 sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<a href="index.html" class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary rounded-lg flex items-center justify-center"> |
|
|
<i data-feather="terminal" class="w-4 h-4 text-white"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent"> |
|
|
PromptCraft |
|
|
</span> |
|
|
</a> |
|
|
<span class="text-gray-400">|</span> |
|
|
<span class="text-lg font-medium">AI Assistant</span> |
|
|
</div> |
|
|
|
|
|
<button onclick="clearChat()" class="text-gray-400 hover:text-secondary transition-colors"> |
|
|
<i data-feather="trash-2" class="w-5 h-5"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="chat-container flex flex-col max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4"> |
|
|
|
|
|
<div id="messages" class="flex-1 overflow-y-auto space-y-4 mb-4"> |
|
|
|
|
|
<div class="message-bubble assistant-message rounded-2xl p-4"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="bot" class="w-4 h-4 text-secondary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-secondary mb-1">PromptCraft AI Assistant</p> |
|
|
<p class="text-primary">Hello! I'm your AI assistant. I can help you with writing, coding, explanations, and more. I'll provide direct, helpful responses without unnecessary questions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-black/30 backdrop-blur-lg rounded-2xl p-4 border border-gray-800"> |
|
|
<form id="chat-form" class="flex space-x-3"> |
|
|
<div class="flex-1"> |
|
|
<input |
|
|
type="text" |
|
|
id="message-input" |
|
|
placeholder="Message PromptCraft AI..." |
|
|
class="input-field w-full bg-black/50 border border-gray-700 rounded-xl px-4 py-3 text-primary placeholder-gray-500 focus:border-secondary transition-colors" |
|
|
autocomplete="off" |
|
|
> |
|
|
</div> |
|
|
<button |
|
|
type="submit" |
|
|
class="bg-secondary hover:bg-red-700 w-12 h-12 rounded-xl flex items-center justify-center transition-colors" |
|
|
> |
|
|
<i data-feather="send" class="w-5 h-5 text-white"></i> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<div class="flex flex-wrap gap-2 mt-3"> |
|
|
<button onclick="quickAction('Write a short essay about AI ethics')" class="text-xs bg-black/50 hover:bg-secondary/20 text-gray-300 hover:text-secondary px-3 py-1 rounded-lg transition-colors"> |
|
|
Essay Help |
|
|
</button> |
|
|
<button onclick="quickAction('Generate a Python function to calculate factorial')" class="text-xs bg-black/50 hover:bg-secondary/20 text-gray-300 hover:text-secondary px-3 py-1 rounded-lg transition-colors"> |
|
|
Code Example |
|
|
</button> |
|
|
<button onclick="quickAction('Explain quantum computing in simple terms')" class="text-xs bg-black/50 hover:bg-secondary/20 text-gray-300 hover:text-secondary px-3 py-1 rounded-lg transition-colors"> |
|
|
Explain Concept |
|
|
</button> |
|
|
<button onclick="quickAction('Create a study plan for learning web development')" class="text-xs bg-black/50 hover:bg-secondary/20 text-gray-300 hover:text-secondary px-3 py-1 rounded-lg transition-colors"> |
|
|
Study Plan |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
const messagesContainer = document.getElementById('messages'); |
|
|
const chatForm = document.getElementById('chat-form'); |
|
|
const messageInput = document.getElementById('message-input'); |
|
|
|
|
|
// Auto-scroll to bottom |
|
|
function scrollToBottom() { |
|
|
messagesContainer.scrollTop = messagesContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
// Add message to chat |
|
|
function addMessage(content, isUser = false) { |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `message-bubble ${isUser ? 'user-message' : 'assistant-message'} rounded-2xl p-4`; |
|
|
|
|
|
if (isUser) { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="user" class="w-4 h-4 text-primary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-primary mb-1">You</p> |
|
|
<p class="text-primary">${content}</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="bot" class="w-4 h-4 text-secondary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-secondary mb-1">PromptCraft AI Assistant</p> |
|
|
<div class="text-primary">${content}</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
messagesContainer.appendChild(messageDiv); |
|
|
scrollToBottom(); |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
// Simulate AI response |
|
|
function simulateAIResponse(userMessage) { |
|
|
// Show typing indicator |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'message-bubble assistant-message rounded-2xl p-4'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="bot" class="w-4 h-4 text-secondary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-secondary mb-1">PromptCraft AI Assistant</p> |
|
|
<div class="typing-indicator"> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
messagesContainer.appendChild(typingDiv); |
|
|
scrollToBottom(); |
|
|
feather.replace(); |
|
|
|
|
|
// Simulate thinking time |
|
|
setTimeout(() => { |
|
|
// Remove typing indicator |
|
|
messagesContainer.removeChild(typingDiv); |
|
|
|
|
|
// Generate response based on user message |
|
|
let response = generateResponse(userMessage); |
|
|
addMessage(response); |
|
|
}, 1500 + Math.random() * 1000); |
|
|
} |
|
|
// Generate appropriate response using AI model simulation |
|
|
function generateResponse(userMessage) { |
|
|
const lowerMessage = userMessage.toLowerCase(); |
|
|
|
|
|
// Connect to AI model simulation - replace with actual API call |
|
|
if (lowerMessage.includes('factorial') || (lowerMessage.includes('python') && lowerMessage.includes('function'))) { |
|
|
return ` |
|
|
<strong>Python Factorial Function</strong><br><br> |
|
|
|
|
|
Here's a complete Python function to calculate factorial with both iterative and recursive approaches: |
|
|
|
|
|
<div class="code-block p-4 rounded-lg my-3"> |
|
|
<pre class="text-sm text-gray-200"><code># Iterative approach |
|
|
def factorial_iterative(n): |
|
|
if n < 0: |
|
|
raise ValueError("Factorial is not defined for negative numbers") |
|
|
result = 1 |
|
|
for i in range(2, n + 1): |
|
|
result *= i |
|
|
return result |
|
|
|
|
|
# Recursive approach |
|
|
def factorial_recursive(n): |
|
|
if n < 0: |
|
|
raise ValueError("Factorial is not defined for negative numbers") |
|
|
if n == 0 or n == 1: |
|
|
return 1 |
|
|
return n * factorial_recursive(n - 1) |
|
|
|
|
|
# Example usage: |
|
|
print(factorial_iterative(5)) # Output: 120 |
|
|
print(factorial_recursive(5)) # Output: 120</code></pre> |
|
|
</div> |
|
|
|
|
|
<strong>Explanation:</strong> The iterative approach uses a loop to multiply numbers from 1 to n, while the recursive approach calls itself with decreasing values until it reaches the base case (n=0 or 1). |
|
|
`; |
|
|
} else if (lowerMessage.includes('essay') || lowerMessage.includes('write') && lowerMessage.includes('ai')) { |
|
|
return ` |
|
|
<strong>AI Ethics: Navigating the Future Responsibly</strong><br><br> |
|
|
|
|
|
<strong>Introduction</strong><br> |
|
|
Artificial Intelligence stands at the forefront of technological innovation, revolutionizing industries from healthcare to finance. However, this rapid advancement necessitates careful ethical consideration to ensure AI serves humanity's best interests.<br><br> |
|
|
|
|
|
<strong>Core Ethical Principles</strong><br> |
|
|
• <strong>Transparency</strong>: AI systems must be explainable and understandable to build trust<br> |
|
|
• <strong>Fairness</strong>: Algorithms should be designed to avoid bias and discrimination<br> |
|
|
• <strong>Privacy</strong>: Robust data protection measures are essential for user safety<br> |
|
|
• <strong>Accountability</strong>: Clear responsibility frameworks must be established<br><br> |
|
|
|
|
|
<strong>Implementation Challenges</strong><br> |
|
|
Balancing innovation with regulation requires ongoing dialogue between technologists, policymakers, and ethicists. Establishing international standards and ethical guidelines will be crucial for responsible AI development.<br><br> |
|
|
|
|
|
<strong>Conclusion</strong><br> |
|
|
By prioritizing ethical considerations from the outset, we can harness AI's potential while mitigating risks, ensuring technology evolves in alignment with human values. |
|
|
`; |
|
|
} else if (lowerMessage.includes('quantum computing') || lowerMessage.includes('quantum')) { |
|
|
return ` |
|
|
<strong>Quantum Computing: A Simple Explanation</strong><br><br> |
|
|
|
|
|
<strong>The Core Difference</strong><br> |
|
|
Traditional computers use bits (0 or 1), while quantum computers use qubits that can exist in multiple states simultaneously through superposition.<br><br> |
|
|
|
|
|
<strong>Key Quantum Principles</strong><br> |
|
|
• <strong>Superposition</strong>: Qubits can be 0, 1, or both at the same time, enabling parallel computation<br> |
|
|
• <strong>Entanglement</strong>: Qubits can be linked, where the state of one instantly affects another regardless of distance<br> |
|
|
• <strong>Interference</strong>: Quantum states can constructively or destructively interfere to amplify correct answers<br><br> |
|
|
|
|
|
<strong>Practical Applications</strong><br> |
|
|
Quantum computing excels at problems that are computationally intensive for classical computers:<br> |
|
|
• Drug discovery and material science simulations<br> |
|
|
• Cryptography and cybersecurity<br> |
|
|
• Optimization problems in logistics and finance<br> |
|
|
• Machine learning acceleration<br><br> |
|
|
|
|
|
While still in early stages, quantum computing represents a fundamental shift in computational capability with profound implications for science and technology. |
|
|
`; |
|
|
} else if (lowerMessage.includes('study plan') || lowerMessage.includes('learn') && lowerMessage.includes('web')) { |
|
|
return ` |
|
|
<strong>Comprehensive Web Development Learning Path</strong><br><br> |
|
|
|
|
|
<strong>Phase 1: Foundations (4-6 weeks)</strong><br> |
|
|
• HTML5: Semantic markup, forms, accessibility<br> |
|
|
• CSS3: Flexbox, Grid, animations, responsive design<br> |
|
|
• JavaScript: ES6+, DOM manipulation, async programming<br> |
|
|
• Git & GitHub: Version control basics<br><br> |
|
|
|
|
|
<strong>Phase 2: Frontend Development (6-8 weeks)</strong><br> |
|
|
• CSS Frameworks: Tailwind CSS or Bootstrap<br> |
|
|
• JavaScript Frameworks: React.js fundamentals<br> |
|
|
• State management and component architecture<br> |
|
|
• API integration and HTTP requests<br><br> |
|
|
|
|
|
<strong>Phase 3: Backend & Full Stack (8-10 weeks)</strong><br> |
|
|
• Node.js and Express.js server development<br> |
|
|
• Database design with MongoDB or PostgreSQL<br> |
|
|
• Authentication and security best practices<br> |
|
|
• Deployment and DevOps basics<br><br> |
|
|
|
|
|
<strong>Learning Strategy</strong><br> |
|
|
• Build projects weekly to reinforce concepts<br> |
|
|
• Contribute to open source for real-world experience<br> |
|
|
• Practice algorithm problems on platforms like LeetCode<br> |
|
|
• Join developer communities for support and networking<br><br> |
|
|
|
|
|
<strong>Recommended Resources</strong><br> |
|
|
• FreeCodeCamp curriculum<br> |
|
|
• MDN Web Docs for reference<br> |
|
|
• YouTube tutorials for visual learning<br> |
|
|
• Stack Overflow for problem-solving |
|
|
`; |
|
|
} else if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) { |
|
|
return "Hello! I'm your AI assistant. I can help you with writing essays, generating code, explaining concepts, creating study plans, and more. What specific task would you like assistance with today?"; |
|
|
} else if (lowerMessage.includes('help') || lowerMessage.includes('what can you do')) { |
|
|
return ` |
|
|
<strong>I can assist you with:</strong><br><br> |
|
|
|
|
|
<strong>💻 Programming & Development</strong><br> |
|
|
• Generate complete code examples in Python, JavaScript, Java, etc.<br> |
|
|
• Debug and explain code errors<br> |
|
|
• Help with frameworks and libraries<br> |
|
|
• Database design and optimization<br><br> |
|
|
|
|
|
<strong>📚 Writing & Education</strong><br> |
|
|
• Write essays, reports, and creative content<br> |
|
|
• Explain complex concepts in simple terms<br> |
|
|
• Create study plans and learning paths<br> |
|
|
• Summarize articles and research papers<br><br> |
|
|
|
|
|
<strong>🔧 Problem Solving</strong><br> |
|
|
• Break down complex problems into steps<br> |
|
|
• Provide multiple solution approaches<br> |
|
|
• Offer best practices and industry standards<br> |
|
|
• Help with technical interviews and assessments<br><br> |
|
|
|
|
|
What specific area would you like to explore? |
|
|
`; |
|
|
} else { |
|
|
// More specific responses based on content detection |
|
|
if (lowerMessage.includes('code') || lowerMessage.includes('programming')) { |
|
|
return "I'd be happy to help with coding! Please specify the programming language and what you're trying to accomplish. For example: 'Python function for data processing' or 'JavaScript web app feature'."; |
|
|
} else if (lowerMessage.includes('explain') || lowerMessage.includes('what is')) { |
|
|
return "I can explain that concept for you. Could you provide more details about what specifically you'd like me to explain?"; |
|
|
} else if (lowerMessage.includes('how to') || lowerMessage.includes('tutorial')) { |
|
|
return "I can create a step-by-step tutorial for you. Please specify the topic and any particular requirements you have."; |
|
|
} else { |
|
|
return "I'd like to provide you with specific, helpful assistance. Could you tell me more about what you're working on or what kind of help you need? For example: coding help, writing assistance, concept explanation, or planning guidance."; |
|
|
} |
|
|
} |
|
|
} |
|
|
// Quick action buttons - enhanced with better examples |
|
|
function quickAction(message) { |
|
|
messageInput.value = message; |
|
|
chatForm.dispatchEvent(new Event('submit', { cancelable: true })); |
|
|
} |
|
|
|
|
|
// Enhanced AI response simulation with better context handling |
|
|
function simulateEnhancedAIResponse(userMessage) { |
|
|
// Show typing indicator |
|
|
const typingDiv = document.createElement('div'); |
|
|
typingDiv.className = 'message-bubble assistant-message rounded-2xl p-4'; |
|
|
typingDiv.innerHTML = ` |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="bot" class="w-4 h-4 text-secondary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-secondary mb-1">PromptCraft AI Assistant</p> |
|
|
<div class="typing-indicator"> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
<div class="typing-dot"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
messagesContainer.appendChild(typingDiv); |
|
|
scrollToBottom(); |
|
|
feather.replace(); |
|
|
|
|
|
// Simulate API call delay and processing |
|
|
setTimeout(() => { |
|
|
messagesContainer.removeChild(typingDiv); |
|
|
|
|
|
// Generate response using enhanced AI logic |
|
|
let response = generateEnhancedResponse(userMessage); |
|
|
addMessage(response); |
|
|
}, 1000 + Math.random() * 1500); |
|
|
} |
|
|
|
|
|
// Enhanced response generation with better AI simulation |
|
|
function generateEnhancedResponse(userMessage) { |
|
|
// This simulates what a real AI model would generate |
|
|
// In a real implementation, this would be replaced with actual API calls |
|
|
|
|
|
const lowerMessage = userMessage.toLowerCase(); |
|
|
|
|
|
// Simulate AI model processing different types of requests |
|
|
if (lowerMessage.includes('api') || lowerMessage.includes('integration')) { |
|
|
return ` |
|
|
<strong>API Integration Guide</strong><br><br> |
|
|
|
|
|
Here's a comprehensive approach to API integration:<br><br> |
|
|
|
|
|
<strong>1. Understanding the API</strong><br> |
|
|
• Review API documentation thoroughly<br> |
|
|
• Identify authentication requirements (API keys, OAuth, etc.)<br> |
|
|
• Understand rate limits and usage policies<br><br> |
|
|
|
|
|
<strong>2. Implementation Steps</strong><br> |
|
|
<div class="code-block p-4 rounded-lg my-3"> |
|
|
<pre class="text-sm text-gray-200"><code>// Example: Fetch API usage |
|
|
async function fetchData() { |
|
|
try { |
|
|
const response = await fetch('https://api.example.com/data', { |
|
|
method: 'GET', |
|
|
headers: { |
|
|
'Authorization': 'Bearer YOUR_TOKEN', |
|
|
'Content-Type': 'application/json' |
|
|
} |
|
|
}); |
|
|
|
|
|
if (!response.ok) throw new Error('API request failed'); |
|
|
const data = await response.json(); |
|
|
return data; |
|
|
} catch (error) { |
|
|
console.error('API Error:', error); |
|
|
throw error; |
|
|
} |
|
|
}</code></pre> |
|
|
</div> |
|
|
|
|
|
<strong>3. Error Handling & Best Practices</strong><br> |
|
|
• Implement proper error handling and retry logic<br> |
|
|
• Use environment variables for sensitive data<br> |
|
|
• Cache responses when appropriate<br> |
|
|
• Monitor API usage and performance<br><br> |
|
|
|
|
|
Would you like me to help with a specific API or programming language? |
|
|
`; |
|
|
} else if (lowerMessage.includes('error') || lowerMessage.includes('bug')) { |
|
|
return ` |
|
|
<strong>Debugging Assistance</strong><br><br> |
|
|
|
|
|
I can help you debug that issue. Here's my systematic approach:<br><br> |
|
|
|
|
|
<strong>1. Error Analysis</strong><br> |
|
|
• What specific error message are you seeing?<br> |
|
|
• When does the error occur?<br> |
|
|
• Can you share the relevant code snippet?<br><br> |
|
|
|
|
|
<strong>2. Common Debugging Steps</strong><br> |
|
|
• Check console logs and error messages carefully<br> |
|
|
• Verify variable values and data types<br> |
|
|
• Test with simplified examples<br> |
|
|
• Use debugging tools (browser dev tools, IDE debugger)<br><br> |
|
|
|
|
|
<strong>3. Solution Framework</strong><br> |
|
|
<div class="code-block p-4 rounded-lg my-3"> |
|
|
<pre class="text-sm text-gray-200"><code>// Example debugging pattern |
|
|
function debugExample() { |
|
|
console.log('Starting debug...'); |
|
|
// Add console logs at key points |
|
|
try { |
|
|
// Your code here |
|
|
console.log('Step completed successfully'); |
|
|
} catch (error) { |
|
|
console.error('Error details:', error.message, error.stack); |
|
|
} |
|
|
}</code></pre> |
|
|
</div> |
|
|
|
|
|
Please share the specific error or code you're working with, and I'll provide targeted assistance. |
|
|
`; |
|
|
} |
|
|
|
|
|
// Fall back to the main response generator |
|
|
return generateResponse(userMessage); |
|
|
} |
|
|
// Clear chat history |
|
|
function clearChat() { |
|
|
messagesContainer.innerHTML = ` |
|
|
<div class="message-bubble assistant-message rounded-2xl p-4"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-8 h-8 bg-secondary/20 rounded-full flex items-center justify-center flex-shrink-0"> |
|
|
<i data-feather="bot" class="w-4 h-4 text-secondary"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-secondary mb-1">PromptCraft AI Assistant</p> |
|
|
<p class="text-primary">Hello! I'm your AI assistant. I can help you with writing, coding, explanations, and more. I'll provide direct, helpful responses without unnecessary questions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
feather.replace(); |
|
|
} |
|
|
|
|
|
// Handle form submission |
|
|
chatForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const message = messageInput.value.trim(); |
|
|
if (!message) return; |
|
|
|
|
|
// Add user message |
|
|
addMessage(message, true); |
|
|
messageInput.value = ''; |
|
|
|
|
|
// Simulate AI response |
|
|
simulateAIResponse(message); |
|
|
}); |
|
|
|
|
|
// Auto-focus input |
|
|
messageInput.focus(); |
|
|
|
|
|
// Initial scroll to bottom |
|
|
scrollToBottom(); |
|
|
|
|
|
// Enter key to submit |
|
|
messageInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
chatForm.dispatchEvent(new Event('submit', { cancelable: true })); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
