Add files via upload

CB.css

@@ -0,0 +1,190 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "Poppins" , sans-serif;
+    box-sizing: border-box;
+}
+
+body{
+    --background: #131214;
+    background-color: var(--background);
+    /* background: #e3f2fd; */
+    /* background-image: url(images/backgroundforweb.jpg); */
+}
+.chatbot{
+    z-index: 1;
+    position: fixed;
+    right: 45px;
+    bottom: 70px;
+    background: white;
+    transform: scale(0.5);
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    width: 420px;
+    border-radius: 15px;
+    transform-origin: bottom right;
+    transition: all 0.2s ease;
+    box-shadow: 0 0 128px rgba(0, 0, 0, 0.1)
+                0 32px 64px -48px rgba(0, 0, 0, 0.5);
+}
+
+/* chat bot */
+
+.chatbot-toggler{
+    position: fixed;
+    right: 40px;
+    bottom: 15px;
+    height: 50px;
+    width: 50px;
+    color: #fff;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    background-color: #000000a3;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+.info{
+    font-size: 25px;
+    position: fixed;
+    right: 100px;
+    bottom: 15px;
+    height: 50px;
+    width: 50px;
+    color: #fff;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    background-color: #000000a3;
+    border-radius: 50%;
+}
+.chatbot-toggler span{
+    position: absolute;
+}
+.show-chatbot .chatbot-toggler span:first-child,
+.chatbot-toggler span:last-child{
+    opacity: 0;
+}
+.show-chatbot .chatbot{
+    pointer-events: auto;
+    opacity: 1;
+    transform: scale(1);
+
+}
+.show-chatbot .chatbot-toggler span:last-child{
+    opacity: 1;
+}
+.show-chatbot .chatbot-toggler{
+    transform: rotate(90deg);
+}
+.chatbot header{
+    background-color: #724ae8;
+    padding: 16px 0;
+    text-align: center;
+    position: relative;
+}
+.chatbot header span{
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    color: #fff;
+    cursor: pointer;
+    transform: translateY(-50%);
+    display: none;
+}
+.chatbot .chatbox{
+    height: 500px;
+    overflow-y: auto;
+    padding: 30px 20px 100px;
+}
+.chatbox .chat{
+    display: flex;
+}
+.chatbot .incoming span{
+    height: 32px;
+    width: 32px;
+    color: #fff;
+    align-self: flex-end;
+    background: #724ae8;
+    text-align: center;
+    line-height: 32px;
+    border-radius: 4px ;
+    margin: 0 10px 7px 0;
+}
+.chatbox .outgoing{
+    margin: 20px 0px;
+    justify-content: flex-end;
+}
+.chatbox .chat p{
+    max-width: 75%;
+    color: #fff;
+    font-size: 1.25rem;
+    padding: 12px 16px;
+    white-space: pre-wrap;
+    border-radius: 10px 10px 0px 10px;
+    background: #724ae8;
+}
+.chatbox .chat p.error{
+    color: #721c24;
+    background: #f8d7da;
+}
+.chatbox .incoming p{
+    color: #000;
+    background: #f2f2f2;
+    border-radius: 10px 10px 10px 0px;
+}
+.chatbot .chat-input{
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: #fff;
+    padding: 5px 20px;
+    border-top: 1px solid #ccc;
+}
+.chat-input textarea{
+    height: 55px;
+    width: 100%;
+    border: none;
+    outline: none;
+    max-height: 180px;
+    font-size: 1.5rem;
+    resize: none;
+    padding: 16px 15px 16px 0;
+}
+.chat-input span{
+    line-height: 55px;
+    height: 55px;
+    align-self: flex-end;
+    color: #724ae8;
+    font-size: 2rem;
+    cursor: pointer;
+    visibility: hidden;
+}
+.chat-input textarea:valid ~ span{
+    visibility: visible;
+}
+
+
+@media(max-width:490px){
+    .chatbot{
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+    }
+    .chatbot .chatbox{
+        height: 85%;
+    }
+    .chatbot header span{
+        display: block;
+    }
+}

CB.html

@@ -0,0 +1,31 @@
+<!-- <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="chatbot.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
+    <link rel="icon" href="images/favicon.png">
+    <title>Document</title>
+</head>
+<body>
+    <div class="chatbot">
+        <header><h2>Weather Chatbot</h2></header>
+        <ul class="chatbox">
+            <li class="chat incoming">
+                <span class="material-icons">smart_toy</i></span>
+                <p>Hi there 👋 <br> How can I help you today?</p>
+            </li>
+            <li class="chat outgoing">
+                <p>Lorem ipsum dolor sit amet.</p>
+            </li>
+        </ul>
+        <div class="chat-input">
+            <textarea placeholder="Enter a message..." required></textarea>
+            <span id="send_btm" class="material-icons">send</span>
+        </div>
+    </div>
+    <script src="chatbot.js"></script>
+</body>
+</html> -->

CB.js

@@ -0,0 +1,79 @@
+const chatInput = document.querySelector(".chat-input textarea");
+const sendChatBtn = document.getElementById("send_btn");
+const chatbox = document.querySelector(".chatbox");
+const chatbotToggler = document.querySelector(".chatbot-toggler");
+const body1 = document.getElementsByClassName("body")[0];
+const chatbotCloseBtn = document.querySelector(".close-btn");
+
+let userMessage;
+
+const inputInitHeight = chatInput.scrollHeight;
+
+const createChatLi = (message,className)=>{
+    const chatLi = document.createElement("li");
+    chatLi.classList.add("chat",className);
+    let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-icons">smart_toy</span><p></p>`;
+    chatLi.innerHTML = chatContent;
+    chatLi.querySelector("P").textContent =  message;
+    return chatLi;   
+}
+
+const generateResponse = (incomingChatLi)=>{
+    const API_URL = "https://api.openai.com/v1/chat/completions";
+    const messageElement = incomingChatLi.querySelector("p");
+
+    const requestOptions = {
+        method : "POST",
+        headers : {
+            "Content-Type" : "application/json",
+            "Authorization" : `Bearer ${API_KEY}`
+        },
+        body : JSON.stringify({
+            model : "gpt-3.5-turbo",
+            messages : [{role:"user",content: userMessage}]
+        })
+    }
+    fetch(API_URL,requestOptions).then(res=> res.json()).then(data=>{
+        console.log(data);
+        // messageElement.textContent = data.choices[0].message.content;
+    }).catch((err)=>{
+        messageElement.classList.add("error");
+        messageElement.textContent = "Oops! Something went wrong. Please try again";
+    }).finally(()=>chatbox.scrollTo(0,chatbox.scrollHeight));
+}
+
+const handleChat = () =>{
+    userMessage = chatInput.value.trim();
+    if(!userMessage) return;
+    chatInput.value = "";
+    chatInput.computedStyleMap.height = `${inputInitHeight}px`
+
+    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);
+}
+
+chatInput.addEventListener("input",()=>{
+    chatInput.computedStyleMap.height = `${inputInitHeight}px`
+    chatInput.computedStyleMap.height = `${chatInput.scrollHeight}px`
+})
+chatInput.addEventListener("keydown",(e)=>{
+    if(e.key === "Enter" && !e.shiftKey && window.innerWidth>800){
+        e.preventDefault();
+        handleChat();
+    }
+})
+
+sendChatBtn.addEventListener("click",handleChat);
+chatbotToggler.addEventListener("click",()=>{
+    body1.classList.toggle("show-chatbot")
+});
+chatbotCloseBtn.addEventListener("click",()=>{
+    body1.classList.remove("show-chatbot")
+});