fix(tui): 避免继续输出时历史内容闪烁

Author: miaopan607

packages/tui/src/routes/session/index.tsx

@@ -14,6 +14,7 @@ import {
   untrack,
   useContext,
 } from "solid-js"
+import { createStore, reconcile } from "solid-js/store"
 import path from "node:path"
 import { mkdir, writeFile } from "node:fs/promises"
 import { useRoute, useRouteData } from "../../context/route"
@@ -76,7 +77,7 @@ import { DialogExportOptions } from "../../ui/dialog-export-options"
 import * as Model from "../../util/model"
 import { formatTranscript } from "../../util/transcript"
 import { sessionEpilogue } from "../../util/presentation"
-import { projectContinuationMessages } from "../../util/session-continuation"
+import { projectContinuationMessages, type MessageWithParts } from "../../util/session-continuation"
 import { setPreLayoutSiblingMargin } from "../../util/layout"
 import { useTuiConfig } from "../../config"
 import { useClipboard } from "../../context/clipboard"
@@ -269,11 +270,16 @@ export function Session() {
       .toSorted((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
   })
   const messages = createMemo(() => sync.data.message[route.sessionID] ?? [])
-  const displayMessages = createMemo(() =>
-    projectContinuationMessages(
-      messages().map((message) => ({ info: message, parts: sync.data.part[message.id] ?? [] })),
-    ),
-  )
+  const [displayMessages, setDisplayMessages] = createStore<Array<MessageWithParts & { id: string }>>([])
+  createEffect(() => {
+    setDisplayMessages(
+      reconcile(
+        projectContinuationMessages(
+          messages().map((message) => ({ info: message, parts: sync.data.part[message.id] ?? [] })),
+        ).map((message) => ({ id: message.info.id, ...message })),
+      ),
+    )
+  })
   const hasUserMessage = createMemo(() => messages().some((message) => message.role === "user"))
   const canContinue = createMemo(() => {
     const status = sync.data.session_status[route.sessionID]
@@ -1446,7 +1452,7 @@ export function Session() {
                 scrollAcceleration={scrollAcceleration()}
               >
                 <box height={1} />
-                <For each={displayMessages()}>
+                <For each={displayMessages}>
                   {(entry, index) => {
                     const message = entry.info
                     return (

packages/tui/test/util/session-continuation.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { AssistantMessage, Part } from "@miaopan/sdk/v2"
+import { createStore, reconcile } from "solid-js/store"
 import { projectContinuationMessages, type MessageWithParts } from "../../src/util/session-continuation"
 
 function assistant(id: string, parentID: string, error?: AssistantMessage["error"]): AssistantMessage {
@@ -93,6 +94,31 @@ describe("projectContinuationMessages", () => {
     expect(input[1]?.parts).toEqual([text("prt_2", "msg_2", "continued "), text("prt_3", "msg_2", "answer")])
   })
 
+  test("preserves projected message and part identity while continued output streams", () => {
+    const project = (value: string) =>
+      projectContinuationMessages([
+        {
+          info: assistant("msg_1", "msg_user", {
+            name: "MessageAbortedError",
+            data: { message: "aborted" },
+          }),
+          parts: [text("prt_1", "msg_1", "partial ")],
+        },
+        { info: assistant("msg_2", "msg_user"), parts: [text("prt_2", "msg_2", value)] },
+      ]).map((message) => ({ id: message.info.id, ...message }))
+    const [messages, setMessages] = createStore(project("answer"))
+    const message = messages[0]
+    const part = messages[0]?.parts[0]
+
+    setMessages(reconcile(project("answer continues")))
+
+    expect(messages[0]).toBe(message)
+    expect(messages[0]?.parts[0]).toBe(part)
+    const next = messages[0]?.parts[0]
+    expect(next?.type).toBe("text")
+    if (next?.type === "text") expect(next.text).toBe("partial answer continues")
+  })
+
   test("keeps the latest failure visible until another assistant supersedes it", () => {
     const input: MessageWithParts[] = [
       {