Added chatbot profile icon

I have observed that chatbot profile icon had been missing and I made changes tot he indes.html and added script.js file for chatbot.
Its-Aman-Yadav · Oct 7, 2024 · 425fab9 · 425fab9
1 parent ea798f6
commit 425fab9
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -589,30 +589,29 @@ <h3>Start Your Journey Now!💡 </h3>
 }
 </script>
 
-  <!-- Chatbot integration section -->
-  <script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
-  <script>
-    window.botpressWebChat.init({
-        "composerPlaceholder": "Ask me anything!",
-        "botConversationDescription": "Welcome to Open Source Village!",
-        "botId": "88f3d139-4a56-4ac6-a192-d147bc4373d7",
-        "hostUrl": "https://cdn.botpress.cloud/webchat/v1",
-        "messagingUrl": "https://messaging.botpress.cloud",
-        "clientId": "88f3d139-4a56-4ac6-a192-d147bc4373d7",
-        "webhookId": "a909bd46-1d71-484d-8551-58afe6d64c1e",
-        "lazySocket": true,
-        "themeName": "prism",
-        "botName": "Open Source Village",
-        "avatarUrl": "https://media.licdn.com/dms/image/D4D0BAQE8E3S0-vt8TQ/company-logo_200_200/0/1683703353326?e=1724889600&v=beta&t=to32718A4rdNZM_XmtjHN8xG4LKE9UYLhVnuoyB3nt8",
-        "stylesheet": "https://webchat-styler-css.botpress.app/prod/328bf234-c9e7-4f98-9c94-69f1a0877b98/v99808/style.css",
-        "frontendVersion": "v1",
-        "useSessionStorage": true,
-        "enableConversationDeletion": true,
-        "theme": "prism",
-        "themeColor": "#2563eb",
-        "allowedOrigins": []
-    });
-  </script>
+<body class="show-chatbot">
+
+  <div class="chatbot">
+<header>
+  <h2>Chatbot</h2>
+</header>
+<ul class="chatbox">
+  <li class=" chat incoming">
+      <span class="material-symbols-outlined">smart_toy</span>
+      <p>Hi there 👋 <br> How can I help you today?</p>
+  </li>
+
+
+</ul>
+<div class="chat-input">
+  <textarea placeholder="Enter a  message..." required></textarea>
+  <span id="send-btn" class="material-symbols-outlined">Send</span>
+</div>
+
+</div>
+
+<script src="script.js" defer></script>
+</body>
 
   <!-- preloader section -->
   <section class="preloader">

diff --git a/script.js b/script.js
@@ -0,0 +1,63 @@
+const chatInput = document.querySelector(".chat-input textarea");
+const sendChatBtn = document.querySelector(".chat-input span");
+const chatbox = document.querySelector(".chatbox");
+
+let userMessage = "";
+const API_KEY="";
+
+const createChatLi = (message, className) => {
+  const chatLi = document.createElement("li");
+  chatLi.classList.add("chat", className);
+  let chatContent =
+    className === "outgoing"
+      ? `<p></p>`
+      : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
+  chatLi.innerHTML = chatContent;
+  chatLi.querySelector("p").textContent = message;
+  return chatLi;
+};
+
+const generateResponse = (incomingChatLi) => {
+  const API_URL = `https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent?key=${API_KEY}`;
+  const messageElement = incomingChatLi.querySelector("p");
+  const requestOptions = {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      contents: [
+        {
+          role: "user",
+          parts: [{ text: userMessage }],
+        },
+      ],
+    }),
+  };
+  fetch(API_URL, requestOptions)
+    .then((res) => res.json())
+    .then((data) => {
+      messageElement.textContent = data.candidates[0].content.parts[0].text;
+    })
+    .catch((error) => {
+      messageElement.textContent =
+        "Oops! Something went wrong. Please try again later.";
+    })
+    .finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
+};
+
+const handleChat = () => {
+  userMessage = chatInput.value.trim();
+  if (!userMessage) return;
+  chatInput.value = "";
+
+  chatbox.appendChild(createChatLi(userMessage, "outgoing"));
+  chatbox.scrollTo(0, chatbox.scrollHeight);
+
+  setTimeout(() => {
+    const incomingChatLi = createChatLi("Thinking....", "incoming");
+    chatbox.appendChild(incomingChatLi);
+    chatbox.scrollTo(0, chatbox.scrollHeight);
+    generateResponse(incomingChatLi);
+  }, 600);
+};
+
+sendChatBtn.addEventListener("click", handleChat);