fix(app): user message fade

1 files changed, 18 insertions, 12 deletions

diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 2759d6c37..bcd166275 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -113,6 +113,19 @@
     padding-bottom: 28px;
   }
 
+  [data-component="user-message"][data-can-expand="true"]:not([data-expanded="true"]) [data-slot="user-message-text"]::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 8px;
+    bottom: 0px;
+    background:
+      linear-gradient(to bottom, transparent, var(--surface-weak)),
+      linear-gradient(to bottom, transparent, var(--surface-weak));
+    pointer-events: none;
+  }
+
   [data-component="user-message"] [data-slot="user-message-text"] [data-slot="user-message-expand"] {
     display: none;
     position: absolute;
@@ -121,12 +134,8 @@
     padding: 0;
   }
 
-  [data-component="user-message"][data-can-expand="true"]
-    [data-slot="user-message-text"]
-    [data-slot="user-message-expand"],
-  [data-component="user-message"][data-expanded="true"]
-    [data-slot="user-message-text"]
-    [data-slot="user-message-expand"] {
+  [data-component="user-message"][data-can-expand="true"] [data-slot="user-message-text"] [data-slot="user-message-expand"],
+  [data-component="user-message"][data-expanded="true"] [data-slot="user-message-text"] [data-slot="user-message-expand"] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -143,10 +152,7 @@
     }
   }
 
-  [data-component="user-message"][data-expanded="true"]
-    [data-slot="user-message-text"]
-    [data-slot="user-message-expand"]
-    [data-slot="icon-svg"] {
+  [data-component="user-message"][data-expanded="true"] [data-slot="user-message-text"] [data-slot="user-message-expand"] [data-slot="icon-svg"] {
     transform: rotate(180deg);
   }
 
@@ -247,7 +253,7 @@
       font-size: 15px;
     }
 
-    &[data-fade="true"] > * {
+    &[data-fade="true"]>* {
       animation: fadeUp 0.4s ease-out forwards;
       opacity: 0;
 
@@ -539,7 +545,7 @@
     padding-right: 12px;
     border-left: 1px solid var(--border-base);
 
-    > :first-child > [data-component="markdown"]:first-child {
+    > :first-child>[data-component="markdown"]:first-child {
       margin-top: 0;
     }
   }