Function MiniChatbot

client/src/component/MiniChatbot.jsx:7–159

()

import { GoogleGenerativeAI } from '@google/generative-ai';

const MiniChatbot = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [messages, setMessages] = useState([{ text: 'Hi! How can I help you today?', sender: 'bot' }]);
  const [userMessage, setUserMessage] = useState('');

  const toggleChatbot = () => {
    setIsOpen(!isOpen);
  };

  const sendMessage = async () => {
    if (userMessage.trim() === '') return;

    const newMessages = [...messages, { text: userMessage, sender: 'user' }];
    setMessages(newMessages);
    setUserMessage('');

    // Initialize the GoogleGenerativeAI client
    const genAI = new GoogleGenerativeAI('AIzaSyDcBsz-OK0rZ5cSY5EkoMIodpax63m_FWs'); // Use env variable for API key
    const model = genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });

    try {
      // Generate content based on the user's message
      const prompt = `
      You can do Hi hello but
      You are an AI assistant for an educational platform. Only respond to questions related to education and all.
      If the question is unrelated, respond with: "I can only assist with questions related to our learning platform and its services."
      Here's the user's question: '${userMessage}'
      `;


      const result = await model.generateContent(prompt);

      // Access the generated content, assuming response structure
      const botResponse = result.response.text(); // Adjust based on API's actual response

      setMessages([...newMessages, { text: botResponse, sender: 'bot' }]);
    } catch (error) {
      console.error('Error generating content:', error);
      setMessages([...newMessages, { text: 'Oops, something went wrong!', sender: 'bot' }]);
    }
  };

  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.pageYOffset > 20) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };