haaaaaaaaaaaaa

TotoB12 · Feb 18, 2024 · c999c87 · c999c87
1 parent f5050f1
commit c999c87
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 27 deletions.
diff --git a/public/script.js b/public/script.js
@@ -486,7 +486,8 @@ function updateMenuWithConversations() {
 
     categories.forEach(category => {
       if (category.conversations.length > 0) {
-        const header = document.createElement("h4");
+        const header = document.createElement("p");
+        header.className = "conversation-header";
         header.textContent = category.label;
         menu.appendChild(header);
 
@@ -747,7 +748,7 @@ function startWebSocket() {
       ) {
         // console.log("UUID:", data.uuid);
         processAIResponse(data.text);
-        wrapCodeElements();
+        // wrapCodeElements();
       }
 
       if (data.type === "pong") {
@@ -859,6 +860,7 @@ function processAIResponse(message, isError = false) {
     generateAndDisplayImage(imageCommandMatch[1]);
   } else if (displayedMessage.trim() !== "") {
     latestAIMessageElement.innerHTML = marked.parse(displayedMessage.trim());
+    wrapCodeElements();
   }
 
   if (latestAIMessageElement.fullMessage.trim() !== "") {
@@ -877,12 +879,33 @@ function processAIResponse(message, isError = false) {
 }
 
 function addLoadingIndicator() {
+  const bubbleContainer = document.createElement("div");
+  bubbleContainer.className = "loading-bubble";
+
   const loadingIndicator = document.createElement("div");
   loadingIndicator.className = "image-loading";
-  loadingIndicator.textContent = "Generating image...";
-  // const loadingIndicatorIcon = document.createElement("div");
-  // loadingIndicatorIcon.className = "image-loading-icon";
-  // chatBox.appendChild(loadingIndicatorIcon);
+  loadingIndicator.textContent = "Generating image";
+  bubbleContainer.appendChild(loadingIndicator);
+  chatBox.appendChild(bubbleContainer);
+
+  let dots = 0;
+  const maxDots = 3;
+  const updateText = () => {
+    dots = (dots + 1) % (maxDots + 1);
+    loadingIndicator.textContent = "Generating image" + ".".repeat(dots);
+  };
+  const intervalId = setInterval(updateText, 500);
+
+  bubbleContainer.dataset.intervalId = intervalId.toString();
+}
+
+function removeLoadingIndicator() {
+  const bubbleContainer = document.querySelector(".loading-bubble");
+  if (bubbleContainer) {
+    const intervalId = parseInt(bubbleContainer.dataset.intervalId, 10);
+    clearInterval(intervalId);
+    bubbleContainer.remove();
+  }
 }
 
 function generateAndDisplayImage(prompt, image = null) {
@@ -899,16 +922,7 @@ function generateAndDisplayImage(prompt, image = null) {
     .then((response) => response.json())
     .then((data) => {
       if (data && data.imageData) {
-        const loadingIndicator = document.querySelector(".image-loading");
-        const loadingIndicatorIcon = document.querySelector(
-          ".image-loading-icon",
-        );
-        if (loadingIndicator) {
-          loadingIndicator.remove();
-        }
-        if (loadingIndicatorIcon) {
-          loadingIndicatorIcon.remove();
-        }
+        removeLoadingIndicator();
 
         const imageBlob = base64ToBlob(data.imageData);
         const tempImageUrl = URL.createObjectURL(imageBlob);
@@ -1074,6 +1088,10 @@ function sendMessage() {
     isNewConversation = false;
   }
 
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
+
   inputField.value = "";
   resetTextarea();
   resetUploadButton();
@@ -1083,10 +1101,7 @@ function sendMessage() {
   isAIResponding = true;
   updateSendButtonState();
   wrapCodeElements();
-
-  if (ws && ws.readyState === WebSocket.OPEN) {
-    ws.send(JSON.stringify(message));
-  }
+  updateMenuWithConversations();
 }
 
 function displayImage(imageUrl, blobUrl = false) {
@@ -1791,7 +1806,7 @@ function update_anim(t) {
 // }
 
 function wrapCodeElements() {
-  console.log('haaaaaaaaa');
+  // console.log('haaaaaaaaa');
   hljs.highlightAll();
   const codeElements = document.querySelectorAll("code");
   codeElements.forEach((codeElement) => {

diff --git a/public/style.css b/public/style.css
@@ -8,14 +8,23 @@
 }
 
 @font-face {
-    font-family: 'PolySans';
+    font-family: 'PolySans Neutral';
     src: url('/assets/fonts/PolySans-neutral.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'PolySans Bulky';
     src: url('/assets/fonts/PolySans-bulky.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'PolySans Slim';
     src: url('/assets/fonts/PolySans-slim.ttf') format('truetype');
 }
 
 ::-webkit-scrollbar {
     width: 7px;
+    height: 7px;
     /* 10px */
 }
 
@@ -34,7 +43,7 @@
 }
 
 body {
-    font-family: 'PolySans', Arial, sans-serif;
+    font-family: 'PolySans Slim', Arial, sans-serif;
     margin: 0;
     background-color: var(--background-color);
     color: var(--main-color);
@@ -104,7 +113,7 @@ body {
 }
 
 #chat-input {
-    font-family: 'PolySans', Arial, sans-serif;
+    font-family: 'PolySans Slim', Arial, sans-serif;
     resize: none;
     font-size: large;
     flex-grow: 1;
@@ -760,7 +769,7 @@ code.hljs {
 }
 
 .copy-button {
-    font-family: 'PolySans', Arial, sans-serif;
+    font-family: 'PolySans Neutral', Arial, sans-serif;
     cursor: pointer;
     background: none;
     border: none;
@@ -937,16 +946,32 @@ input:checked + .slider:before {
    -moz-animation: loading-animation 1s infinite linear;
 }
 
+.loading-bubble {
+  /* display: inline-block; */
+  width: 20vw;
+  padding: 10px 20px;
+  margin: 20px 0px;
+  background-color: var(--main-color);
+  border-radius: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  color: #333;
+}
+
 .image-loading {
-  color: var(--main-color);
-  font-size: 1.2em;
+  color: inherit;
+  font-size: 1em;
 }
 
+
 @keyframes loading-animation {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
+}
+
+.conversation-header {
+  font-family: 'PolySans Neutral', Arial, sans-serif;
 }