Added Chatbot API key and Changed the icons

joefelx · Jan 19, 2025 · 6c7d85f · 6c7d85f
1 parent 7ce27d4
commit 6c7d85f
Show file tree

Hide file tree

Showing 5 changed files with 302 additions and 213 deletions.
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import logo from "../assets/logo.png";
 import FAQSection from "./components/FAQSection";
 import { Link } from "react-router-dom";
-import Bot from "./components/bot"; // Corrected path
+import Bot from "./components/bot";
 
 function Home() {
   console.log(process.env.REACT_APP_SERVER_URL);
@@ -52,7 +52,7 @@ function Home() {
           <p>© 2025 QuickHeal. All rights reserved.</p>
         </div>
       </footer>
-    
+
       {/* Bot Component */}
       <Bot />
     </div>

diff --git a/client/src/pages/components/WorkingProgress.jsx b/client/src/pages/components/WorkingProgress.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+function WorkingProgress({ children }) {
+  return (
+    <div className="relative">
+      <div className="absolute bg-white w-full h-full flex justify-center items-center opacity-90">
+        Work in Progress
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export default WorkingProgress;
diff --git a/client/src/pages/components/bot.js b/client/src/pages/components/bot.js
@@ -3,8 +3,6 @@ import MediBot from "./medibot";
 import roboIcon from "../../assets/robo.png";
 import "../../styles/chatbot.css";
 
-
-
 function Bot() {
   const [chatbotOpen, setChatbotOpen] = useState(false);
   const [position, setPosition] = useState({ x: 20, y: 20 });
@@ -50,6 +48,7 @@ function Bot() {
         right: `${position.x}px`,
         zIndex: 1000,
       }}
+      title="ChatBot"
     >
       <div
         onClick={handleChatClick}

diff --git a/client/src/pages/components/medibot.js b/client/src/pages/components/medibot.js
@@ -1,17 +1,23 @@
-import React, { useState, useEffect, useRef } from 'react'; 
-import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from "@google/generative-ai";
+import React, { useState, useEffect, useRef } from "react";
+import {
+  GoogleGenerativeAI,
+  HarmCategory,
+  HarmBlockThreshold,
+} from "@google/generative-ai";
 
-function MediBot({ onClose, name = "MediBot" }) { // Default name is "MediBot"
+import { FiMaximize2, FiMinimize2, FiMinus } from "react-icons/fi";
+
+function MediBot({ onClose, name = "MediBot" }) {
+  // Default name is "MediBot"
   const [messages, setMessages] = useState([]);
   const [userInput, setUserInput] = useState("");
   const [chat, setChat] = useState(null);
   const [error, setError] = useState(null);
   const [isMaximized, setIsMaximized] = useState(false);
 
-  const API_KEY = process.env.REACT_APP_API_KEY;
-  console.log("API Key available:", !!API_KEY);
+  const API_KEY = process.env.REACT_APP_CHATBOT_API_KEY;
 
-  const MODEL_NAME = 'gemini-1.0-pro-001';
+  const MODEL_NAME = "gemini-1.0-pro-001";
 
   const genAI = new GoogleGenerativeAI(API_KEY);
 
@@ -77,7 +83,7 @@ function MediBot({ onClose, name = "MediBot" }) { // Default name is "MediBot"
 
       if (chat) {
         console.log("Sending message to AI:", userInput);
-        
+
         const input_prompt = `You are a friendly and knowledgeable medical assistant chatbot named ${name}. Respond to the following message appropriately: ${userInput}`;
         const result = await chat.sendMessage(input_prompt);
         const botMessage = {
@@ -104,131 +110,155 @@ function MediBot({ onClose, name = "MediBot" }) { // Default name is "MediBot"
 
   useEffect(() => {
     if (chatContainerRef.current) {
-      chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+      chatContainerRef.current.scrollTop =
+        chatContainerRef.current.scrollHeight;
     }
   }, [messages]);
 
   const toggleMaximize = () => {
     setIsMaximized(!isMaximized);
   };
 
-  const chatContainerStyle = isMaximized ? {
-    width: '80vw',
-    height: '80vh',
-    position: 'fixed',
-    top: '10vh',
-    left: '10vw',
-    zIndex: 1001,
-  } : {
-    width: '300px',
-    height: '400px',
-    position: 'absolute',
-    bottom: '80px',
-    right: '0',
-  };
+  const chatContainerStyle = isMaximized
+    ? {
+        width: "80vw",
+        height: "80vh",
+        position: "fixed",
+        top: "10vh",
+        left: "10vw",
+        zIndex: 1001,
+      }
+    : {
+        width: "300px",
+        height: "400px",
+        position: "absolute",
+        bottom: "80px",
+        right: "0",
+      };
 
   return (
-    <div style={{
-      ...chatContainerStyle,
-      border: '1px solid #ccc',
-      borderRadius: '10px',
-      padding: '10px',
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: 'white',
-      color: 'black',
-      boxShadow: '0 4px 8px rgba(0,0,0,0.1)',
-    }}>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '10px',
-      }}>
-        <h2 style={{ margin: 0, color: '#3498db' }}>{name} - Your friend here!</h2> {/* Display the chatbot's name */}
-        <div>
-          <button 
+    <div
+      style={{
+        ...chatContainerStyle,
+        border: "1px solid #ccc",
+        borderRadius: "10px",
+        padding: "10px",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "white",
+        color: "black",
+        boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: "10px",
+        }}
+      >
+        <h2 style={{ margin: 0, color: "#3498db" }}>
+          {name} - Your friend here!
+        </h2>{" "}
+        {/* Display the chatbot's name */}
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "5px",
+          }}
+        >
+          <button
             onClick={toggleMaximize}
             style={{
-              background: 'none',
-              border: 'none',
-              fontSize: '18px',
-              cursor: 'pointer',
-              marginRight: '10px',
+              background: "none",
+              border: "none",
+              fontSize: "13px",
+              cursor: "pointer",
             }}
+            title={isMaximized ? "Minimize" : "Maximize"}
           >
-            {isMaximized ? '🗗' : '🗖'}
+            {isMaximized ? <FiMinimize2 /> : <FiMaximize2 />}
           </button>
-          <button 
+          <button
             onClick={onClose}
             style={{
-              background: 'none',
-              border: 'none',
-              fontSize: '18px',
-              cursor: 'pointer',
+              background: "none",
+              border: "none",
+              fontSize: "20px",
+              cursor: "pointer",
             }}
+            title="Close"
           >
-            ×
+            <FiMinus />
           </button>
         </div>
       </div>
-      <div 
+      <div
         ref={chatContainerRef}
         style={{
           flex: 1,
-          overflowY: 'auto',
-          marginBottom: '10px',
-          border: '1px solid #eee',
-          padding: '10px',
-          borderRadius: '5px',
+          overflowY: "auto",
+          marginBottom: "10px",
+          border: "1px solid #eee",
+          padding: "10px",
+          borderRadius: "5px",
         }}
       >
         {messages.map((msg, index) => (
-          <div key={index} style={{
-            marginBottom: '10px',
-            textAlign: msg.role === 'user' ? 'right' : 'left',
-          }}>
-            <span style={{
-              backgroundColor: msg.role === 'user' ? '#dcf8c6' : '#f2f2f2',
-              padding: '8px 12px',
-              borderRadius: '18px',
-              display: 'inline-block',
-              maxWidth: '80%',
-              wordWrap: 'break-word',
-              fontSize: isMaximized ? '16px' : '14px',
-            }}>
+          <div
+            key={index}
+            style={{
+              marginBottom: "10px",
+              textAlign: msg.role === "user" ? "right" : "left",
+            }}
+          >
+            <span
+              style={{
+                backgroundColor: msg.role === "user" ? "#dcf8c6" : "#f2f2f2",
+                padding: "8px 12px",
+                borderRadius: "18px",
+                display: "inline-block",
+                maxWidth: "80%",
+                wordWrap: "break-word",
+                fontSize: isMaximized ? "16px" : "14px",
+              }}
+            >
               {msg.text}
             </span>
           </div>
         ))}
-        {error && <div style={{color: 'red', textAlign: 'center'}}>{error}</div>}
+        {error && (
+          <div style={{ color: "red", textAlign: "center" }}>{error}</div>
+        )}
       </div>
-      <div style={{display: 'flex'}}>
+      <div style={{ display: "flex" }}>
         <input
           type="text"
           value={userInput}
           onChange={(e) => setUserInput(e.target.value)}
-          onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
+          onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
           style={{
             flex: 1,
-            marginRight: '5px',
-            padding: '8px',
-            borderRadius: '20px',
-            border: '1px solid #ccc',
-            fontSize: isMaximized ? '16px' : '14px',
+            marginRight: "5px",
+            padding: "8px",
+            borderRadius: "20px",
+            border: "1px solid #ccc",
+            fontSize: isMaximized ? "16px" : "14px",
           }}
           placeholder="Type your message..."
         />
-        <button 
-          onClick={handleSendMessage} 
+        <button
+          onClick={handleSendMessage}
           style={{
-            padding: '8px 15px',
-            backgroundColor: '#3498db',
-            color: 'white',
-            border: 'none',
-            borderRadius: '20px',
-            cursor: 'pointer',
-            fontSize: isMaximized ? '16px' : '14px',
+            padding: "8px 15px",
+            backgroundColor: "#3498db",
+            color: "white",
+            border: "none",
+            borderRadius: "20px",
+            cursor: "pointer",
+            fontSize: isMaximized ? "16px" : "14px",
           }}
         >
           Send