new patch

src/App.js

@@ -4,9 +4,10 @@ import "./App.css";
 function App() {
   const [message, setMessage] = useState("");
   const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(false);
 
   const sendMessage = async () => {
-    if (!message.trim()) return;
+    if (!message.trim() || loading) return;
 
     const userMessage = {
       role: "user",
@@ -14,8 +15,10 @@ function App() {
     };
 
     const updatedMessages = [...messages, userMessage];
+
     setMessages(updatedMessages);
     setMessage("");
+    setLoading(true);
 
     try {
       const response = await fetch(
@@ -23,7 +26,7 @@ function App() {
         {
           method: "POST",
           headers: {
-            Authorization: `Bearer YOUR_HF_TOKEN`,
+            Authorization: `Bearer ${process.env.REACT_APP_HF_TOKEN}`,
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
@@ -35,52 +38,114 @@ function App() {
         }
       );
 
+      if (!response.ok) {
+        const error = await response.text();
+        throw new Error(error);
+      }
+
       const data = await response.json();
 
       const botMessage = {
         role: "assistant",
-        content: data.choices[0].message.content,
+        content:
+          data.choices?.[0]?.message?.content ||
+          "Sorry, I couldn't generate a response.",
       };
 
       setMessages((prev) => [...prev, botMessage]);
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error(error);
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          role: "assistant",
+          content: "❌ Error: Unable to connect to Hugging Face API.",
+        },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      sendMessage();
     }
   };
 
   return (
-    <div style={{ width: "700px", margin: "40px auto" }}>
-      <h2>AI Chatbot</h2>
+    <div
+      style={{
+        width: "700px",
+        margin: "40px auto",
+        fontFamily: "Arial",
+      }}
+    >
+      <h2>🤖 AI Chatbot</h2>
 
       <div
         style={{
           height: "450px",
-          border: "1px solid gray",
+          border: "1px solid #ccc",
+          borderRadius: "8px",
           overflowY: "auto",
-          padding: "10px",
-          marginBottom: "10px",
+          padding: "15px",
+          marginBottom: "15px",
+          background: "#f8f8f8",
         }}
       >
+        {messages.length === 0 && (
+          <p style={{ color: "gray" }}>Start a conversation...</p>
+        )}
+
         {messages.map((msg, index) => (
-          <div key={index}>
-            <b>{msg.role === "user" ? "You" : "Bot"}:</b> {msg.content}
+          <div
+            key={index}
+            style={{
+              marginBottom: "12px",
+              textAlign: msg.role === "user" ? "right" : "left",
+            }}
+          >
+            <strong>
+              {msg.role === "user" ? "You" : "AI"}
+            </strong>
+            <br />
+            {msg.content}
           </div>
         ))}
+
+        {loading && (
+          <p>
+            <strong>AI:</strong> Thinking...
+          </p>
+        )}
       </div>
 
       <input
         type="text"
+        placeholder="Type your message..."
         value={message}
         onChange={(e) => setMessage(e.target.value)}
-        placeholder="Type a message..."
-        style={{ width: "80%", padding: "10px" }}
+        onKeyDown={handleKeyDown}
+        style={{
+          width: "80%",
+          padding: "12px",
+          fontSize: "16px",
+        }}
       />
 
       <button
         onClick={sendMessage}
-        style={{ width: "18%", padding: "10px", marginLeft: "2%" }}
+        disabled={loading}
+        style={{
+          width: "18%",
+          padding: "12px",
+          marginLeft: "2%",
+          cursor: "pointer",
+        }}
       >
-        Send
+        {loading ? "..." : "Send"}
       </button>
     </div>
   );