Update index.html

index.html

@@ -7,77 +7,19 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-
     <div class="sidebar">
-        <h2>AI Chat</h2>
-        <input type="text" id="api-key" placeholder="Enter API Key">
-        <button class="glow-btn" id="set-api">Set API Key</button>
+        <h2>Chatbot</h2>
+        <input type="text" id="api-key" placeholder="Enter API Key" class="api-input">
+        <button class="glow-btn" onclick="setApiKey()">Set API Key</button>
     </div>
-
     <div class="chat-container">
-        <h1 class="chat-header">Chat with AI</h1>
-        <div class="chat-box" id="chat-box"></div>
+        <h1 class="chat-header">AI Chat</h1>
+        <div id="chat-box" class="chat-box"></div>
         <div class="chat-input">
             <input type="text" id="user-input" placeholder="Type a message...">
-            <button class="send-btn" id="send-button">Send</button>
+            <button id="send-button" class="send-btn">Send</button>
         </div>
     </div>
-
-    <script>
-        let apiKey = "";
-
-        document.getElementById("set-api").addEventListener("click", () => {
-            apiKey = document.getElementById("api-key").value.trim();
-            if (!apiKey) {
-                alert("Please enter a valid API key.");
-            }
-        });
-
-        async function getChatResponse(userMessage) {
-            if (!apiKey) {
-                return "API key is missing. Please enter a valid API key.";
-            }
-
-            try {
-                const response = await fetch("https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.2", {
-                    method: "POST",
-                    headers: {
-                        "Authorization": `Bearer ${apiKey}`,
-                        "Content-Type": "application/json"
-                    },
-                    body: JSON.stringify({ inputs: userMessage })
-                });
-
-                const data = await response.json();
-                return data.generated_text || "Sorry, I couldn't process your request.";
-            } catch (error) {
-                console.error("Error fetching response:", error);
-                return "An error occurred. Please try again.";
-            }
-        }
-
-        async function handleChat() {
-            const userInput = document.getElementById("user-input").value;
-            if (!userInput.trim()) return;
-
-            const chatBox = document.getElementById("chat-box");
-            chatBox.innerHTML += `<div class="user-message"><strong>You:</strong> ${userInput}</div>`;
-            document.getElementById("user-input").value = "";
-
-            const response = await getChatResponse(userInput);
-            chatBox.innerHTML += `<div class="bot-message"><strong>AI:</strong> ${response}</div>`;
-
-            chatBox.scrollTop = chatBox.scrollHeight;
-        }
-
-        document.getElementById("user-input").addEventListener("keypress", function (event) {
-            if (event.key === "Enter") {
-                handleChat();
-            }
-        });
-
-        document.getElementById("send-button").addEventListener("click", handleChat);
-    </script>
-
+    <script src="script.js"></script>
 </body>
 </html>