add spinner

index.html

@@ -83,12 +83,15 @@ <h3 id="title">How can I help you today?</h3>
       <div id="chat-box">
         <input type="text" placeholder="Message ChatGPT..." class="chat-text" />
         <div class="button">
-          <button><img src="./img/button.png" /></button>
+          <button id="chat-button"><img src="./img/button.png" /></button>
         </div>
       </div>
       <div id="info-message">
         ChatGPT can make mistakes. Consider checking important information.
       </div>
     </form>
+    <button id="menu-button">
+      <img src="./img/menu-button-nonactive.png" class="menu-button-icon" />
+    </button>
   </body>
 </html>

index.js

@@ -2,7 +2,7 @@
 
 import config from "./apiKey.js";
 
-const button = document.querySelector("button");
+const chatButton = document.querySelector("#chat-button");
 const chatText = document.querySelector("input");
 const titleImage = document.querySelector("#title-image");
 const title = document.querySelector("#title");
@@ -109,7 +109,7 @@ async function fetchAIResponse(prompt) {
       Authorization: `Bearer ${config.apikey}`,
     },
     body: JSON.stringify({
-      model: "gpt-4",
+      model: "gpt-3.5-turbo",
       messages: [
         {
           role: "system",
@@ -159,21 +159,21 @@ chatText.addEventListener("input", async (e) => {
   if (checker === 0) return;
   if (chatText.value === "") {
     // console.log(1);
-    button.innerHTML = `<img src="./img/button.png" />`;
-    button.style.pointerEvents = "none";
-    button.style.userSelect = "none";
-    button.disabled = true;
+    chatButton.innerHTML = `<img src="./img/button.png" />`;
+    chatButton.style.pointerEvents = "none";
+    chatButton.style.userSelect = "none";
+    chatButton.disabled = true;
   }
   // console.log(1);
   else {
-    button.innerHTML = `<img src="./img/button_active.png" />`;
-    button.style.pointerEvents = "auto";
-    button.style.userSelect = "auto";
-    button.disabled = false;
+    chatButton.innerHTML = `<img src="./img/button_active.png" />`;
+    chatButton.style.pointerEvents = "auto";
+    chatButton.style.userSelect = "auto";
+    chatButton.disabled = false;
   }
 });
 
-button.addEventListener("click", async (e) => {
+chatButton.addEventListener("click", async (e) => {
   e.preventDefault();
   if (chatText.value === "") {
     console.log(1);
@@ -190,20 +190,60 @@ button.addEventListener("click", async (e) => {
   addMessage("나", message);
   chatText.value = "";
 
-  button.innerHTML = `<img src="./img/spinner.png" style="width: 20px; height: 20px; margin-top: 2px;"/>`;
+  chatButton.innerHTML = `<img src="./img/spinner.png" style="width: 20px; height: 20px; margin-top: 2px;"/>`;
   // button.style.pointerEvents = "none";
   // button.style.userSelect = "none";
   // button.disabled = true;
   checker = 0;
 
+  const tempMessageElement = addTemporaryMessage();
+
   const aiResponse = await fetchAIResponse(message);
 
   // button.innerHTML = `Send`;
-  button.innerHTML = `<img src="./img/button.png" />`;
-  button.style.pointerEvents = "none";
-  button.style.userSelect = "none";
-  button.disabled = true;
+  chatButton.innerHTML = `<img src="./img/button.png" />`;
+  chatButton.style.pointerEvents = "none";
+  chatButton.style.userSelect = "none";
+  chatButton.disabled = true;
   checker = 1;
 
+  // 임시 메시지 요소를 제거하고, 실제 응답으로 메시지 추가
+  chatContainer.removeChild(tempMessageElement);
   addMessage("금쪽이", aiResponse);
 });
+
+const menuButton = document.querySelector("#menu-button");
+
+menuButton.addEventListener("mouseover", async (e) => {
+  e.preventDefault();
+  menuButton.innerHTML = `<img src="./img/menu-button-active.png" class="menu-button-icon" />`;
+});
+
+menuButton.addEventListener("mouseleave", async (e) => {
+  e.preventDefault();
+  menuButton.innerHTML = `<img src="./img/menu-button-nonactive.png" class="menu-button-icon" />`;
+});
+
+const addTemporaryMessage = () => {
+  const tempMessageElement = document.createElement("div");
+  tempMessageElement.className = "chat gpt-chat";
+  const imgElement = document.createElement("img");
+  imgElement.src = "./img/gpt4-icon.png";
+  imgElement.className = "profile";
+  const nameElement = document.createElement("div");
+  nameElement.textContent = "ChatGPT";
+  nameElement.className = "chat-name";
+  const logElement = document.createElement("div");
+  logElement.className = "chat-log";
+  const spinnerElement = document.createElement("img");
+  spinnerElement.src = "./img/ellipse-spinner.png"; // 스피너 이미지 경로를 지정하세요
+  spinnerElement.className = "spinner";
+
+  logElement.appendChild(spinnerElement);
+  tempMessageElement.appendChild(imgElement);
+  tempMessageElement.appendChild(nameElement);
+  tempMessageElement.appendChild(logElement);
+
+  chatContainer.prepend(tempMessageElement);
+  return tempMessageElement;
+};

style.css

@@ -16,7 +16,7 @@ nav {
   width: 100%;
   top: 0px;
   margin-bottom: 4px;
-  background-color: rgba(255, 255, 255, 0.866);
+  background-color: rgba(255, 255, 255, 0.918);
 }
 
 ul {
@@ -117,7 +117,7 @@ form {
   justify-content: center;
 }
 
-button {
+#chat-button {
   border: none;
   width: 24px;
   height: 24px;
@@ -127,7 +127,7 @@ button {
   user-select: none;
 }
 
-.button img {
+#chat-button img {
   width: 24px;
   height: 24px;
   margin: 0px;
@@ -258,6 +258,11 @@ img {
   flex-direction: column;
   justify-content: center;
   padding-left: 10px;
+  cursor: pointer;
+}
+
+.section:hover {
+  background-color: #f1f1f1;
 }
 
 .section-title {
@@ -301,3 +306,26 @@ pre {
 code {
   font-family: "Consolas", "Monaco", "Courier New", monospace; /* 모노스페이스 폰트 */
 }
+
+#menu-button {
+  position: fixed;
+  left: 0px;
+  top: 45%;
+  width: 20px;
+  height: 50px;
+  cursor: pointer;
+  z-index: 9999;
+  border: none;
+  background-color: white;
+}
+
+.menu-button-icon {
+  width: 5px;
+  margin: 0px;
+}
+
+.spinner {
+  width: 8px;
+  margin: 0;
+  padding: 0;
+}