mirror of
https://github.com/anomalyco/opencode.git
synced 2026-02-01 22:48:16 +00:00
fix(desktop): message animation
This commit is contained in:
20
packages/desktop/src/hooks/create-session-seen.ts
Normal file
20
packages/desktop/src/hooks/create-session-seen.ts
Normal file
@@ -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
|
||||
}
|
||||
@@ -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()}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user