feat: close #2187 improve chat actions ux

app/components/chat.module.scss

@@ -239,6 +239,19 @@
   &:last-child {
     animation: slide-in ease 0.3s;
   }
+
+  &:hover {
+    .chat-message-actions {
+      opacity: 1;
+      transform: translateY(0px);
+      max-width: 100%;
+      height: 40px;
+    }
+
+    .chat-message-action-date {
+      opacity: 0.2;
+    }
+  }
 }
 
 .chat-message-user {
@@ -305,45 +318,40 @@
   position: relative;
   transition: all ease 0.3s;
 
-  &:hover {
-    .chat-message-actions {
-      opacity: 1;
-      transform: translateY(0px);
-      max-width: 100%;
-      height: 40px;
-
-      .chat-message-action-date {
-        opacity: 0.3;
-      }
-    }
-  }
-
   .chat-message-actions {
     display: flex;
     box-sizing: border-box;
     font-size: 12px;
     align-items: flex-end;
     justify-content: space-between;
-    transition: all ease 0.1s;
+    transition: all ease 0.3s 0.15s;
-    transform: translateY(10px);
+    transform: translateX(-5px) scale(0.9) translateY(30px);
     opacity: 0;
     height: 0;
     max-width: 0;
+    position: absolute;
+    left: 0;
+    z-index: 2;
 
     .chat-input-actions {
       display: flex;
       flex-wrap: nowrap;
     }
   }
+}
 
-  .chat-message-action-date {
+.chat-message-action-date {
-    white-space: nowrap;
+  font-size: 12px;
-    transition: all ease 0.6s;
+  opacity: 0.2;
-    color: var(--black);
+  white-space: nowrap;
-    opacity: 0;
+  transition: all ease 0.6s;
-    text-align: right;
+  color: var(--black);
-    margin-left: 20px;
+  text-align: right;
-  }
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 10px;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .chat-message-user > .chat-message-container > .chat-message-item {

app/components/chat.tsx

@@ -992,13 +992,15 @@ export function Chat() {
                             </>
                           )}
                         </div>
-
-                        <div className={styles["chat-message-action-date"]}>
-                          {message.date.toLocaleString()}
-                        </div>
                       </div>
                     )}
                   </div>
+
+                  {showActions && (
+                    <div className={styles["chat-message-action-date"]}>
+                      {message.date.toLocaleString()}
+                    </div>
+                  )}
                 </div>
               </div>
               {shouldShowClearContextDivider && <ClearContextDivider />}