lmin/zmo-cli
1
0
Fork 0
Code Issues Pull Requests Actions 86 Packages Projects Releases Wiki Activity

fix(app): timeline jank

Browse Source
This commit is contained in:
Adam
2026-03-03 05:35:15 -06:00
parent 18850c4f91
commit 5e8742f431
4 changed files with 114 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/pages/session.tsx
+3 -1
View File
@@ -1091,7 +1091,9 @@ export default function Page() {
const el = scroller const el = scroller
const delta = next - dockHeight const delta = next - dockHeight
const stick = el ? el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta) : false const stick = el
? !autoScroll.userScrolled() || el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta)
: false
dockHeight = next dockHeight = next
packages/app/src/pages/session/message-timeline.tsx
+3 -1
View File
@@ -689,7 +689,9 @@ export function MessageTimeline(props: {
if (!item || active()) return false if (!item || active()) return false
return messageID > item.id return messageID > item.id
}) })
const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? [])) const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? []), [], {
equals: (a, b) => JSON.stringify(a) === JSON.stringify(b),
})
const commentCount = createMemo(() => comments().length) const commentCount = createMemo(() => comments().length)
return ( return (
<div <div
packages/ui/src/components/message-part.tsx
+69 -31
View File
@@ -9,6 +9,7 @@ import {
Show, Show,
Switch, Switch,
onCleanup, onCleanup,
Index,
type JSX, type JSX,
} from "solid-js" } from "solid-js"
import stripAnsi from "strip-ansi" import stripAnsi from "strip-ansi"
@@ -458,50 +459,67 @@ export function AssistantParts(props: {
const last = createMemo(() => grouped().at(-1)?.key) const last = createMemo(() => grouped().at(-1)?.key)
return ( return (
<For each={grouped()}> <Index each={grouped()}>
{(entry) => { {(entryAccessor) => {
if (entry.type === "context") { const entryType = createMemo(() => entryAccessor().type)
return (
<Switch>
<Match when={entryType() === "context"}>
{(() => {
const parts = createMemo( const parts = createMemo(
() => () => {
entry.refs const entry = entryAccessor() as { type: "context"; refs: PartRef[] }
return entry.refs
.map((ref) => partByID(list(data.store.part?.[ref.messageID], emptyParts), ref.partID)) .map((ref) => partByID(list(data.store.part?.[ref.messageID], emptyParts), ref.partID))
.filter((part): part is ToolPart => !!part && isContextGroupTool(part)), .filter((part): part is ToolPart => !!part && isContextGroupTool(part))
},
emptyTools, emptyTools,
{ equals: same }, { equals: same },
) )
const busy = createMemo(() => props.working && last() === entry.key) const busy = createMemo(() => props.working && last() === entryAccessor().key)
return ( return (
<Show when={parts().length > 0}> <Show when={parts().length > 0}>
<ContextToolGroup parts={parts()} busy={busy()} /> <ContextToolGroup parts={parts()} busy={busy()} />
</Show> </Show>
) )
} })()}
</Match>
const message = createMemo(() => props.messages.find((item) => item.id === entry.ref.messageID)) <Match when={entryType() === "part"}>
const part = createMemo(() => {(() => {
partByID(list(data.store.part?.[entry.ref.messageID], emptyParts), entry.ref.partID), const message = createMemo(() => {
) const entry = entryAccessor() as { type: "part"; ref: PartRef }
return props.messages.find((item) => item.id === entry.ref.messageID)
})
const part = createMemo(() => {
const entry = entryAccessor() as { type: "part"; ref: PartRef }
return partByID(list(data.store.part?.[entry.ref.messageID], emptyParts), entry.ref.partID)
})
return ( return (
<Show when={message()}> <Show when={message()}>
{(message) => ( {(msg) => (
<Show when={part()}> <Show when={part()}>
{(part) => ( {(p) => (
<Part <Part
part={part()} part={p()}
message={message()} message={msg()}
showAssistantCopyPartID={props.showAssistantCopyPartID} showAssistantCopyPartID={props.showAssistantCopyPartID}
turnDurationMs={props.turnDurationMs} turnDurationMs={props.turnDurationMs}
defaultOpen={partDefaultOpen(part(), props.shellToolDefaultOpen, props.editToolDefaultOpen)} defaultOpen={partDefaultOpen(p(), props.shellToolDefaultOpen, props.editToolDefaultOpen)}
/> />
)} )}
</Show> </Show>
)} )}
</Show> </Show>
) )
})()}
</Match>
</Switch>
)
}} }}
</For> </Index>
) )
} }
@@ -632,14 +650,21 @@ export function AssistantMessageDisplay(props: {
) )
return ( return (
<For each={grouped()}> <Index each={grouped()}>
{(entry) => { {(entryAccessor) => {
if (entry.type === "context") { const entryType = createMemo(() => entryAccessor().type)
return (
<Switch>
<Match when={entryType() === "context"}>
{(() => {
const parts = createMemo( const parts = createMemo(
() => () => {
entry.refs const entry = entryAccessor() as { type: "context"; refs: PartRef[] }
return entry.refs
.map((ref) => partByID(props.parts, ref.partID)) .map((ref) => partByID(props.parts, ref.partID))
.filter((part): part is ToolPart => !!part && isContextGroupTool(part)), .filter((part): part is ToolPart => !!part && isContextGroupTool(part))
},
emptyTools, emptyTools,
{ equals: same }, { equals: same },
) )
@@ -649,19 +674,32 @@ export function AssistantMessageDisplay(props: {
<ContextToolGroup parts={parts()} /> <ContextToolGroup parts={parts()} />
</Show> </Show>
) )
} })()}
</Match>
const part = createMemo(() => partByID(props.parts, entry.ref.partID)) <Match when={entryType() === "part"}>
{(() => {
const part = createMemo(() => {
const entry = entryAccessor() as { type: "part"; ref: PartRef }
return partByID(props.parts, entry.ref.partID)
})
return ( return (
<Show when={part()}> <Show when={part()}>
{(part) => ( {(p) => (
<Part part={part()} message={props.message} showAssistantCopyPartID={props.showAssistantCopyPartID} /> <Part
part={p()}
message={props.message}
showAssistantCopyPartID={props.showAssistantCopyPartID}
/>
)} )}
</Show> </Show>
) )
})()}
</Match>
</Switch>
)
}} }}
</For> </Index>
) )
} }
packages/ui/src/hooks/create-auto-scroll.tsx
+3
View File
@@ -142,8 +142,11 @@ export function createAutoScroll(options: AutoScrollOptions) {
const handleInteraction = () => { const handleInteraction = () => {
if (!active()) return if (!active()) return
const selection = window.getSelection()
if (selection && selection.toString().length > 0) {
stop() stop()
} }
}
const updateOverflowAnchor = (el: HTMLElement) => { const updateOverflowAnchor = (el: HTMLElement) => {
const mode = options.overflowAnchor ?? "dynamic" const mode = options.overflowAnchor ?? "dynamic"