@pubuduth-aplicy/chat-ui 2.1.33 → 2.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.1.33",
+  "version": "2.1.34",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/messages/MessageInput.tsx

@@ -116,7 +116,6 @@ const MessageInput = () => {
     [message, selectedConversation, userId, isSending]
   );
 
-
   return (
     <form className="chatMessageInputform" onSubmit={handleSubmit}>
       <div className="chatMessageInputdiv">
@@ -135,14 +134,12 @@ const MessageInput = () => {
 
       {typingUser && typingUser !== userId && !isSending && (
         <div className="typingIndicator">
-          <section className="dots-container">
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-            <div className="dot" />
-          </section>
-          typing...
+          <div className="loader">
+            <div className="ball" />
+            <div className="ball" />
+            <div className="ball" />
+            typing
+          </div>
         </div>
       )}
     </form>

package/src/style/style.css

@@ -299,7 +299,7 @@
 .chatMessageInputform {
     position: sticky;
     bottom: 0;
-    background: #dbdbdb;
+    background: #eee7e7;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.25rem;
@@ -389,57 +389,57 @@
 
 }
 
+.typingIndicator{
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
 
-/* From Uiverse.io by adamgiebl */ 
-.dots-container {
+/* From Uiverse.io by ashish-yadv */ 
+.loader {
+    width: 60px;
     display: flex;
     align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  margin-right: 10px;
+  width: 100%;
+    font-size: smaller;
+    gap: 0.5rem;
   }
   
-  .dot {
-    height: 20px;
-    width: 20px;
-    margin-right: 10px;
-    border-radius: 10px;
-    background-color: #b3d4fc;
-    animation: pulse 1.5s infinite ease-in-out;
+  .ball {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #3b2dfd;
   }
   
-  .dot:last-child {
-    margin-right: 0;
+  .ball:nth-child(1) {
+    animation: bounce-1 2.1s ease-in-out infinite;
   }
   
-  .dot:nth-child(1) {
-    animation-delay: -0.3s;
+  @keyframes bounce-1 {
+    50% {
+      transform: translateY(-3px);
+    }
   }
   
-  .dot:nth-child(2) {
-    animation-delay: -0.1s;
+  .ball:nth-child(2) {
+    animation: bounce-3 2.1s ease-in-out 0.3s infinite;
   }
   
-  .dot:nth-child(3) {
-    animation-delay: 0.1s;
+  @keyframes bounce-2 {
+    50% {
+      transform: translateY(-3px);
+    }
   }
   
-  @keyframes pulse {
-    0% {
-      transform: scale(0.8);
-      background-color: #b3d4fc;
-      box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
-    }
+  .ball:nth-child(3) {
+    animation: bounce-3 2.1s ease-in-out 0.6s infinite;
+  }
   
+  @keyframes bounce-3 {
     50% {
-      transform: scale(1.2);
-      background-color: #6793fb;
-      box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
-    }
-  
-    100% {
-      transform: scale(0.8);
-      background-color: #b3d4fc;
-      box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
+      transform: translateY(-3px);
     }
   }