From 0a4e39d4cdc949932def8d0ca92e102180775601 Mon Sep 17 00:00:00 2001
From: Shrividhya T <147847435+Shriividhya@users.noreply.github.com>
Date: Tue, 25 Mar 2025 10:49:56 +0530
Subject: [PATCH] Add files via upload
---
CB.css | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
CB.html | 31 +++++++++
CB.js | 79 +++++++++++++++++++++++
3 files changed, 300 insertions(+)
create mode 100644 CB.css
create mode 100644 CB.html
create mode 100644 CB.js
diff --git a/CB.css b/CB.css
new file mode 100644
index 0000000..6288564
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/CB.html b/CB.html
new file mode 100644
index 0000000..8f4468d
--- /dev/null
+++ b/CB.html
@@ -0,0 +1,31 @@
+
\ No newline at end of file
diff --git a/CB.js b/CB.js
new file mode 100644
index 0000000..bfae2b8
--- /dev/null
+++ b/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" ? `` : `smart_toy`;
+ 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")
+});
\ No newline at end of file