Precompute message display parts and pause scroll handling

src/stores/sessions.ts

@@ -1,8 +1,9 @@
 import { createSignal } from "solid-js"
 import type { Session, Agent, Provider } from "../types/session"
-import type { Message } from "../types/message"
+import type { Message, MessageDisplayParts } from "../types/message"
 import { instances } from "./instances"
 import { sseManager } from "../lib/sse-manager"
+import { preferences } from "./preferences"
 
 interface SessionInfo {
   tokens: number
@@ -81,6 +82,24 @@ function removeSessionIndexes(instanceId: string) {
   sessionIndexes.delete(instanceId)
 }
 
+function computeDisplayParts(message: Message, showThinking: boolean): MessageDisplayParts {
+  const text: any[] = []
+  const tool: any[] = []
+  const reasoning: any[] = []
+
+  for (const part of message.parts) {
+    if (part.type === "text" && !part.synthetic) {
+      text.push(part)
+    } else if (part.type === "tool") {
+      tool.push(part)
+    } else if (part.type === "reasoning" && showThinking) {
+      reasoning.push(part)
+    }
+  }
+
+  return { text, tool, reasoning }
+}
+
 function withSession(instanceId: string, sessionId: string, updater: (session: Session) => void) {
   const instanceSessions = sessions().get(instanceId)
   if (!instanceSessions) return
@@ -684,7 +703,7 @@ async function loadMessages(instanceId: string, sessionId: string, force = false
 
       messagesInfo.set(messageId, info)
 
-      return {
+      const message: Message = {
         id: messageId,
         sessionId,
         type: role === "user" ? "user" : "assistant",
@@ -692,6 +711,10 @@ async function loadMessages(instanceId: string, sessionId: string, force = false
         timestamp: info.time?.created || Date.now(),
         status: "complete" as const,
       }
+
+      message.displayParts = computeDisplayParts(message, preferences().showThinkingBlocks)
+
+      return message
     })
 
     let agentName = ""
@@ -794,7 +817,7 @@ function handleMessageUpdate(instanceId: string, event: any): void {
 
     if (messageIndex === undefined) {
       // Create new message
-      const newMessage = {
+      const newMessage: Message = {
         id: part.messageID,
         sessionId: part.sessionID,
         type: "assistant" as const,
@@ -803,6 +826,8 @@ function handleMessageUpdate(instanceId: string, event: any): void {
         status: "streaming" as const,
       }
 
+      newMessage.displayParts = computeDisplayParts(newMessage, preferences().showThinkingBlocks)
+
       let insertIndex = session.messages.length
       for (let i = session.messages.length - 1; i >= 0; i--) {
         if (session.messages[i].id < newMessage.id) {
@@ -854,6 +879,8 @@ function handleMessageUpdate(instanceId: string, event: any): void {
       message.status = message.status === "sending" ? "streaming" : message.status
       message.parts = baseParts
 
+      message.displayParts = computeDisplayParts(message, preferences().showThinkingBlocks)
+
       // Update message index if ID changed
       if (oldId !== message.id) {
         index.messageIndex.delete(oldId)
@@ -937,7 +964,7 @@ function handleMessageUpdate(instanceId: string, event: any): void {
         }
       } else {
         // Append new message
-        const newMessage = {
+        const newMessage: Message = {
           id: info.id,
           sessionId: info.sessionID,
           type: (info.role === "user" ? "user" : "assistant") as "user" | "assistant",
@@ -946,6 +973,8 @@ function handleMessageUpdate(instanceId: string, event: any): void {
           status: "complete" as const,
         }
 
+        newMessage.displayParts = computeDisplayParts(newMessage, preferences().showThinkingBlocks)
+
         let insertIndex = session.messages.length
         for (let i = session.messages.length - 1; i >= 0; i--) {
           if (session.messages[i].id < newMessage.id) {
@@ -1083,6 +1112,8 @@ async function sendMessage(
     status: "sending",
   }
 
+  optimisticMessage.displayParts = computeDisplayParts(optimisticMessage, preferences().showThinkingBlocks)
+
   withSession(instanceId, sessionId, (session) => {
     session.messages.push(optimisticMessage)
     const index = getSessionIndex(instanceId, sessionId)