AI Chatbot Configuration Guide

Overview

Your website now includes an intelligent AI chatbot that can answer questions about your skills, experience, and projects!

Current Setup

The chatbot is currently running in MOCK MODE for demonstration purposes. It uses pre-programmed responses based on your resume data.

Features

✅ Floating chat widget with notification badge ✅ Quick question buttons for common queries ✅ Typing indicators for natural conversation flow ✅ Mobile responsive design ✅ Dark/Light mode support ✅ Smooth animations and transitions ✅ Chat history maintained during session

Quick Questions Available

  • 💻 Technical Skills
  • 🔬 Research Experience
  • 🚀 Projects
  • 📧 Contact Information

Switching to Real AI (OpenAI)

Step 1: Get an API Key

  1. Go to https://platform.openai.com/
  2. Sign up or log in
  3. Navigate to API Keys section
  4. Create a new API key
  5. Copy the key (starts with sk-)

Step 2: Configure the Chatbot

Open chatbot.js and find the CHATBOT_CONFIG section (around line 180):

const CHATBOT_CONFIG = {
    provider: 'openai',  // Change from 'mock' to 'openai'
    apiKey: 'sk-your-api-key-here',  // Paste your API key
    model: 'gpt-3.5-turbo',  // or 'gpt-4' for better responses
    maxTokens: 500,
    temperature: 0.7
};

Step 3: Security Considerations

⚠️ IMPORTANT: Never commit your API key to public repositories!

For production, you should:

  1. Use environment variables
  2. Set up a backend proxy server
  3. Implement rate limiting
  4. Add authentication

Example Backend Setup (Node.js/Express)

// server.js
const express = require('express');
const app = express();

app.post('/api/chat', async (req, res) => {
    const { message } = req.body;
    
    // Call OpenAI API here with your secret key
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [/* your messages */]
        })
    });
    
    const data = await response.json();
    res.json(data);
});

Then update chatbot.js to call your backend instead of OpenAI directly.

Alternative AI Providers

Anthropic Claude

const CHATBOT_CONFIG = {
    provider: 'anthropic',
    apiKey: 'your-anthropic-key',
    model: 'claude-3-sonnet-20240229'
};

Local LLM (Ollama)

const CHATBOT_CONFIG = {
    provider: 'local',
    endpoint: 'http://localhost:11434/api/generate',
    model: 'llama2'
};

Customizing Responses

Update Resume Context

Edit the resumeContext variable in chatbot.js (lines 1-180) to update the information the chatbot knows about you.

Add More Mock Responses

In the getMockResponse() function, add more conditions:

if (lowerMessage.includes('your-keyword')) {
    resolve("Your custom response here");
}

Styling Customization

Change Colors

Edit chatbot.css to customize:

  • Chat bubble colors
  • Button styles
  • Avatar appearance
  • Animation speeds

Change Position

In chatbot.css, modify .chat-widget:

.chat-widget {
    bottom: 2rem;  /* Distance from bottom */
    right: 2rem;   /* Distance from right */
    /* Change to left: 2rem; for left side */
}

Testing

Test Questions to Try

  1. “What are Darya’s main technical skills?”
  2. “Tell me about her research experience”
  3. “What projects has she worked on?”
  4. “How can I contact her?”
  5. “What’s her GPA?”
  6. “Does she speak any languages?”
  7. “Is she looking for internships?”

Troubleshooting

Chatbot Not Appearing

  • Check browser console for errors (F12)
  • Ensure all files are loaded correctly
  • Verify chatbot.js and chatbot.css are included in HTML

API Errors

  • Verify API key is correct
  • Check API quota/billing
  • Ensure CORS is configured if using backend
  • Check network tab for failed requests

Slow Responses

  • Reduce maxTokens in config
  • Use faster model (gpt-3.5-turbo vs gpt-4)
  • Implement caching for common questions

Cost Optimization

OpenAI Pricing (as of 2024)

  • GPT-3.5-turbo: ~$0.002 per 1K tokens
  • GPT-4: ~$0.03 per 1K tokens

Tips to Reduce Costs

  1. Use mock mode for development
  2. Implement response caching
  3. Limit conversation history (currently set to last 10 messages)
  4. Set reasonable maxTokens limit
  5. Use GPT-3.5-turbo instead of GPT-4

Analytics (Optional)

Track chatbot usage by adding analytics:

function trackChatEvent(action, label) {
    // Google Analytics
    gtag('event', action, {
        'event_category': 'Chatbot',
        'event_label': label
    });
}

// Call when user sends message
trackChatEvent('message_sent', userMessage);

Future Enhancements

Ideas for improvement:

  • Voice input/output
  • File upload for resume questions
  • Multi-language support
  • Sentiment analysis
  • Lead capture form
  • Email notifications for messages
  • Chat history persistence
  • Admin dashboard for chat logs

Support

For issues or questions:

  • Check browser console for errors
  • Review this configuration guide
  • Test with mock mode first
  • Verify API credentials

License & Credits

This chatbot implementation uses:

  • Font Awesome icons
  • CSS animations
  • Vanilla JavaScript (no frameworks required)
  • OpenAI API (optional)

Current Status: ✅ Mock mode active and working Next Step: Add OpenAI API key to enable real AI responses