fix(desktop): message animation

Author: adamdotdevin

packages/desktop/src/hooks/create-session-seen.ts

@@ -0,0 +1,20 @@
+import { createSignal, onCleanup, onMount } from "solid-js"
+import { isServer } from "solid-js/web"
+
+export function createSessionSeen(key: string, delay = 1000) {
+  // 1. Initialize state based on storage (default to true on server to avoid flash)
+  const storageKey = `app:seen:${key}`
+  const [hasSeen] = createSignal(!isServer && sessionStorage.getItem(storageKey) === "true")
+
+  onMount(() => {
+    // 2. If we haven't seen it, mark it as seen for NEXT time
+    if (!hasSeen()) {
+      const timer = setTimeout(() => {
+        sessionStorage.setItem(storageKey, "true")
+      }, delay)
+      onCleanup(() => clearTimeout(timer))
+    }
+  })
+
+  return hasSeen
+}

packages/desktop/src/pages/session.tsx

@@ -52,6 +52,7 @@ import { useSession } from "@/context/session"
 import { StickyAccordionHeader } from "@/components/sticky-accordion-header"
 import { SessionReview } from "@/components/session-review"
 import { useLayout } from "@/context/layout"
+import { createSessionSeen } from "@/hooks/create-session-seen"
 
 export default function Page() {
   const layout = useLayout()
@@ -451,7 +452,9 @@ export default function Page() {
                         <For each={session.messages.user()}>
                           {(message) => {
                             const isActive = createMemo(() => session.messages.active()?.id === message.id)
-                            const [titled, setTitled] = createSignal(!!message.summary?.title)
+                            const titleSeen = createSessionSeen(`message-title-${message.id}`)
+                            const contentSeen = createSessionSeen(`message-content-${message.id}`)
+                            const [titled, setTitled] = createSignal(titleSeen())
                             const assistantMessages = createMemo(() => {
                               if (!session.id) return []
                               return sync.data.message[session.id]?.filter(
@@ -474,8 +477,9 @@ export default function Page() {
 
                             // allowing time for the animations to finish
                             createEffect(() => {
+                              if (titleSeen()) return
                               const title = message.summary?.title
-                              setTimeout(() => setTitled(!!title), 10_000)
+                              if (title) setTimeout(() => setTitled(true), 10_000)
                             })
                             createEffect(() => {
                               const completed = !working()
@@ -523,8 +527,7 @@ export default function Page() {
                                             <Markdown
                                               classList={{
                                                 "text-14-regular": !!message.summary?.diffs?.length,
-                                                "[&>*]:fade-up-text":
-                                                  !message.summary?.diffs?.length && !initialCompleted,
+                                                "[&>*]:fade-up-text": !message.summary?.diffs?.length && !contentSeen(),
                                               }}
                                               text={summary()}
                                             />