adding a loading ring element for history and refactoring messages

component/src/deepChat.css

@@ -1,6 +1,7 @@
 @import url('./views/validateKeyProperty/validateKeyPropertyView.css');
 @import url('./views/insertKey/insertKeyView.css');
 @import url('./views/error/errorView.css');
+@import url('./utils/loading/loading.css');
 @import url('./views/chat/chatView.css');
 @import url('./webModel/webModel.css');
 

component/src/utils/loading/loading.css

@@ -0,0 +1,8 @@
+@keyframes loading-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

component/src/views/chat/input/buttons/inputButton.css

@@ -2,7 +2,6 @@
 @import url('./microphone/transcriptionText.css');
 @import url('./microphone/microphoneButton.css');
 @import url('./submit/submitButton.css');
-@import url('./submit/loadingIcon.css');
 
 .input-button {
   border-radius: 4px;

component/src/views/chat/input/buttons/submit/submitButton.css

@@ -19,3 +19,64 @@
   margin-right: 0.3em;
   margin-left: 0.3em;
 }
+
+.loading-submit-button {
+  position: relative;
+  left: calc(-9990px + 0.275em);
+  width: 0.22em;
+  height: 0.22em;
+  border-radius: 5px;
+  background-color: #848484;
+  color: #848484;
+  box-shadow:
+    9990px 0 0 0 #848484,
+    calc(9990px + 0.44em) 0 0 0 #848484,
+    calc(9990px + 0.8em) 0 0 0 #848484;
+  animation: loading-submit-button 1.5s infinite linear;
+  bottom: -0.75em;
+}
+
+@keyframes loading-submit-button {
+  0% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+  16.667% {
+    box-shadow:
+      9990px -6px 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+  33.333% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+  50% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) -6px 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+  66.667% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+  83.333% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) -6px 0 0 #848484;
+  }
+  100% {
+    box-shadow:
+      9990px 0 0 0 #848484,
+      calc(9990px + 0.44em) 0 0 0 #848484,
+      calc(9990px + 0.8em) 0 0 0 #848484;
+  }
+}

component/src/views/chat/input/buttons/submit/submitButton.ts

@@ -106,7 +106,7 @@ export class SubmitButton extends InputButton<Styles> {
 
   private static createLoadingIconElement() {
     const loadingIconElement = document.createElement('div');
-    loadingIconElement.classList.add('dots-jumping');
+    loadingIconElement.classList.add('loading-submit-button');
     return loadingIconElement;
   }
 

component/src/views/chat/messages/history/loadingHistory.css

@@ -0,0 +1,49 @@
+.loading-history-message-full-view {
+  position: absolute;
+  height: 70%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.loading-history-message-small {
+  scale: 0.6;
+  height: 20px;
+  margin-bottom: 30px;
+}
+
+.loading-history-message {
+  margin-top: 0px;
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: unset;
+}
+
+.loading-history {
+  width: 70px;
+}
+
+.loading-history div {
+  position: absolute;
+  width: 57px;
+  height: 57px;
+  margin: 7px;
+  border: 5px solid;
+  border-radius: 50%;
+  animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: rgb(219, 219, 219) transparent transparent transparent;
+}
+
+.loading-history div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.loading-history div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.loading-history div:nth-child(3) {
+  animation-delay: -0.15s;
+}

component/src/views/chat/messages/history/loadingHistory.ts

@@ -0,0 +1,34 @@
+import {MessageElements, Messages} from '../messages';
+import {MessageUtils} from '../messageUtils';
+
+export class LoadingHistory {
+  public static readonly CLASS = 'loading-history-message';
+  private static readonly FULL_VIEW_CLASS = 'loading-history-message-full-view';
+  private static readonly SMALL_CLASS = 'loading-history-message-small';
+
+  private static generateLoadingRingElement() {
+    const loadingRingElement = document.createElement('div');
+    loadingRingElement.classList.add('loading-history');
+    loadingRingElement.appendChild(document.createElement('div'));
+    loadingRingElement.appendChild(document.createElement('div'));
+    loadingRingElement.appendChild(document.createElement('div'));
+    loadingRingElement.appendChild(document.createElement('div'));
+    return loadingRingElement;
+  }
+
+  public static addLoadHistoryMessage(messages: Messages, isInitial = true) {
+    const messageElements = messages.createMessageElements('', MessageUtils.AI_ROLE);
+    const {outerContainer, bubbleElement} = messageElements;
+    bubbleElement.classList.add(LoadingHistory.CLASS);
+    const loadingRingElement = LoadingHistory.generateLoadingRingElement();
+    bubbleElement.appendChild(loadingRingElement);
+    const viewClass = isInitial ? LoadingHistory.FULL_VIEW_CLASS : LoadingHistory.SMALL_CLASS;
+    messageElements.outerContainer.classList.add(viewClass);
+    messages.elementRef.prepend(outerContainer);
+    return messageElements;
+  }
+
+  public static changeFullViewToSmall(messageElements?: MessageElements) {
+    messageElements?.outerContainer.classList.replace(LoadingHistory.FULL_VIEW_CLASS, LoadingHistory.SMALL_CLASS);
+  }
+}

component/src/views/chat/messages/messages.css

@@ -1,45 +1,6 @@
 @import url('./remarkable/a11y-dark.min.css');
-
-#messages {
-  overflow: auto;
-}
-
-.outer-message-container:last-child {
-  margin-bottom: 5px;
-}
-
-.inner-message-container {
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  width: calc(97.5% - 24px);
-  max-width: 100%;
-}
-
-.message-bubble {
-  margin-top: 10px;
-  word-wrap: break-word;
-  width: fit-content;
-  max-width: 60%;
-  border-radius: 10px;
-  padding: 0.42em 0.55em;
-  height: fit-content;
-  line-height: 1.26em;
-}
-
-.user-message-text {
-  color: white;
-  background-color: #0084ff;
-  margin-right: 0px;
-  margin-left: auto;
-}
-
-.ai-message-text {
-  color: black;
-  background-color: #e4e6eb;
-  margin-left: 0px;
-  margin-right: auto;
-}
+@import url('./messagesBase.css');
+@import url('./history/loadingHistory.css');
 
 .html-message {
   max-width: unset;
@@ -64,6 +25,57 @@
   padding-right: 0.75em;
 }
 
+.loading-message-bubble {
+  position: relative;
+  width: 0.45em;
+  height: 0.45em;
+  border-radius: 5px;
+  background-color: var(--message-dots-color);
+  color: var(--message-dots-color);
+  animation: loading-message-bubble 1s infinite linear alternate;
+  animation-delay: 0.5s;
+}
+
+.loading-message-bubble::before,
+.loading-message-bubble::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.loading-message-bubble::before {
+  left: -0.7em;
+  width: 0.45em;
+  height: 0.45em;
+  border-radius: 5px;
+  background-color: var(--message-dots-color);
+  color: var(--message-dots-color);
+  animation: loading-message-bubble 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.loading-message-bubble::after {
+  left: 0.7em;
+  width: 0.45em;
+  height: 0.45em;
+  border-radius: 5px;
+  background-color: var(--message-dots-color);
+  color: var(--message-dots-color);
+  animation: loading-message-bubble 1s infinite alternate;
+  animation-delay: 1s;
+}
+
+@keyframes loading-message-bubble {
+  0% {
+    background-color: var(--message-dots-color);
+  }
+  50%,
+  100% {
+    background-color: var(--message-dots-color-fade);
+  }
+}
+
 /* .message-bubble > p {
   line-height: inherit;
 } */