@lvce-editor/chat-view 1.18.0 → 1.20.0

package/dist/chatViewWorkerMain.js

@@ -1192,6 +1192,9 @@ const getComposerWidth = width => {
 const getMinComposerHeight = lineHeight => {
   return lineHeight + 8;
 };
+const getMaxComposerHeight = (lineHeight, maxComposerRows) => {
+  return lineHeight * Math.max(1, maxComposerRows) + 8;
+};
 const estimateComposerHeight = (value, lineHeight) => {
   const lineCount = value.split('\n').length;
   return lineCount * lineHeight + 8;
@@ -1200,17 +1203,19 @@ const getComposerHeight = async (state, value, width = state.width) => {
   const {
     composerFontFamily,
     composerFontSize,
-    composerLineHeight
+    composerLineHeight,
+    maxComposerRows
   } = state;
   const minimumHeight = getMinComposerHeight(composerLineHeight);
+  const maximumHeight = getMaxComposerHeight(composerLineHeight, maxComposerRows);
   const content = value || ' ';
   const composerWidth = getComposerWidth(width);
   try {
     const measuredHeight = await measureTextBlockHeight(content, composerFontFamily, composerFontSize, composerLineHeight, composerWidth);
     const height = Math.ceil(measuredHeight) + 8;
-    return Math.max(minimumHeight, height);
+    return Math.max(minimumHeight, Math.min(maximumHeight, height));
   } catch {
-    return Math.max(minimumHeight, estimateComposerHeight(value, composerLineHeight));
+    return Math.max(minimumHeight, Math.min(maximumHeight, estimateComposerHeight(value, composerLineHeight)));
   }
 };
 const getMinComposerHeightForState = state => {
@@ -1381,10 +1386,16 @@ const getDefaultModels = () => {
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
   const defaultModelId = 'test';
+  const chatMessageFontSize = 13;
+  const chatMessageLineHeight = 20;
   const composerFontSize = 13;
   const composerLineHeight = 20;
   return {
     assetDir: '',
+    chatListScrollTop: 0,
+    chatMessageFontFamily: 'system-ui',
+    chatMessageFontSize,
+    chatMessageLineHeight,
     composerFontFamily: 'system-ui',
     composerFontSize,
     composerHeight: composerLineHeight + 8,
@@ -1399,6 +1410,8 @@ const createDefaultState = () => {
     inputSource: 'script',
     lastSubmittedSessionId: '',
     listItemHeight: 40,
+    maxComposerRows: 5,
+    messagesScrollTop: 0,
     mockApiCommandId: '',
     models: getDefaultModels(),
     nextMessageId: 1,
@@ -1411,6 +1424,7 @@ const createDefaultState = () => {
     openRouterApiKeyInput: '',
     openRouterApiKeysSettingsUrl: 'https://openrouter.ai/settings/keys',
     openRouterApiKeyState: 'idle',
+    passIncludeObfuscation: false,
     platform: 0,
     renamingSessionId: '',
     selectedModelId: defaultModelId,
@@ -1420,6 +1434,7 @@ const createDefaultState = () => {
       messages: [],
       title: defaultSessionTitle()
     }],
+    streamingEnabled: false,
     tokensMax: 0,
     tokensUsed: 0,
     uid: 0,
@@ -1457,7 +1472,7 @@ const create = (uid, x, y, width, height, platform, assetDir) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.initial === newState.initial && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize;
+  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight;
 };
 
 const diffFocus = (oldState, newState) => {
@@ -1471,12 +1486,17 @@ const isEqual = (oldState, newState) => {
   return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.viewMode === newState.viewMode;
 };
 
+const diffScrollTop = (oldState, newState) => {
+  return oldState.chatListScrollTop === newState.chatListScrollTop && oldState.messagesScrollTop === newState.messagesScrollTop;
+};
+
 const RenderItems = 4;
 const RenderFocus = 6;
 const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderCss = 10;
 const RenderIncremental = 11;
+const RenderScrollTop = 12;
 
 const diffValue = (oldState, newState) => {
   if (oldState.composerValue === newState.composerValue) {
@@ -1485,8 +1505,8 @@ const diffValue = (oldState, newState) => {
   return newState.inputSource !== 'script';
 };
 
-const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus];
-const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext];
+const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus, diffScrollTop];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext, RenderScrollTop];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1519,6 +1539,7 @@ const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
+const SetProperty = 'Viewlet.setProperty';
 const SetValueByName = 'Viewlet.setValueByName';
 const SetPatches = 'Viewlet.setPatches';
 
@@ -1868,18 +1889,12 @@ const getListIndex = (state, eventX, eventY) => {
     x,
     y
   } = state;
-  if (eventX < x || eventY < y) {
+  const relativeX = eventX - x;
+  const relativeY = eventY - y - headerHeight;
+  if (relativeX < 0 || relativeY < 0 || relativeX >= width || relativeY >= height - headerHeight) {
     return -1;
   }
-  if (eventX >= x + width || eventY >= y + height) {
-    return -1;
-  }
-  const listY = eventY - y - headerHeight;
-  if (listY < 0) {
-    return -1;
-  }
-  const itemHeight = listItemHeight > 0 ? listItemHeight : 40;
-  return Math.floor(listY / itemHeight);
+  return Math.floor(relativeY / listItemHeight);
 };
 
 const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
@@ -2192,6 +2207,63 @@ const getMockAiResponse = async userMessage => {
   return `Mock AI response: I received "${userMessage}".`;
 };
 
+let queue = [];
+let waiters = [];
+let finished = false;
+const reset$1 = () => {
+  queue = [];
+  waiters = [];
+  finished = false;
+};
+const pushChunk = chunk => {
+  if (waiters.length > 0) {
+    const resolve = waiters.shift();
+    resolve?.(chunk);
+    return;
+  }
+  queue.push(chunk);
+};
+const finish = () => {
+  finished = true;
+  if (waiters.length === 0) {
+    return;
+  }
+  const activeWaiters = waiters;
+  waiters = [];
+  for (const resolve of activeWaiters) {
+    resolve(undefined);
+  }
+};
+const readNextChunk = async () => {
+  if (queue.length > 0) {
+    return queue.shift();
+  }
+  if (finished) {
+    return undefined;
+  }
+  return new Promise(resolve => {
+    waiters.push(resolve);
+  });
+};
+
+const getMockOpenApiAssistantText = async (stream, onTextChunk) => {
+  let text = '';
+  while (true) {
+    const chunk = await readNextChunk();
+    if (typeof chunk !== 'string') {
+      break;
+    }
+    text += chunk;
+    if (stream && onTextChunk) {
+      await onTextChunk(chunk);
+    }
+  }
+  return {
+    text,
+    type: 'success'
+  };
+};
+
 const activateByEvent = (event, assetDir, platform) => {
   // @ts-ignore
   return activateByEvent$1(event, assetDir, platform);
@@ -2495,7 +2567,16 @@ const executeChatTool = async (name, rawArguments, options) => {
   });
 };
 
-const getOpenApiApiEndpoint = openApiApiBaseUrl => {
+const getClientRequestIdHeader = () => {
+  return {
+    'x-client-request-id': crypto.randomUUID()
+  };
+};
+
+const getOpenApiApiEndpoint = (openApiApiBaseUrl, stream) => {
+  if (stream) {
+    return `${openApiApiBaseUrl}/chat/completions?stream=true`;
+  }
   return `${openApiApiBaseUrl}/chat/completions`;
 };
 
@@ -2520,6 +2601,148 @@ const getTextContent = content => {
   return textParts.join('\n');
 };
 
+const getStreamChunkText = content => {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (!Array.isArray(content)) {
+    return '';
+  }
+  return content.map(part => {
+    if (!part || typeof part !== 'object') {
+      return '';
+    }
+    const text = Reflect.get(part, 'text');
+    return typeof text === 'string' ? text : '';
+  }).join('');
+};
+const parseSseEvent = eventChunk => {
+  const lines = eventChunk.split('\n');
+  const dataLines = [];
+  for (const line of lines) {
+    if (!line.startsWith('data:')) {
+      continue;
+    }
+    dataLines.push(line.slice(5).trimStart());
+  }
+  return dataLines;
+};
+const parseOpenApiStream = async (response, onTextChunk) => {
+  if (!response.body) {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let remainder = '';
+  let text = '';
+  let done = false;
+  while (!done) {
+    const {
+      done: streamDone,
+      value
+    } = await reader.read();
+    if (streamDone) {
+      done = true;
+    } else if (value) {
+      remainder += decoder.decode(value, {
+        stream: true
+      });
+    }
+    while (true) {
+      const separatorIndex = remainder.indexOf('\n\n');
+      if (separatorIndex === -1) {
+        break;
+      }
+      const rawEvent = remainder.slice(0, separatorIndex);
+      remainder = remainder.slice(separatorIndex + 2);
+      const dataLines = parseSseEvent(rawEvent);
+      if (dataLines.length === 0) {
+        continue;
+      }
+      for (const line of dataLines) {
+        if (line === '[DONE]') {
+          done = true;
+          break;
+        }
+        let parsed;
+        try {
+          parsed = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (!parsed || typeof parsed !== 'object') {
+          continue;
+        }
+        const choices = Reflect.get(parsed, 'choices');
+        if (!Array.isArray(choices)) {
+          continue;
+        }
+        const firstChoice = choices[0];
+        if (!firstChoice || typeof firstChoice !== 'object') {
+          continue;
+        }
+        const delta = Reflect.get(firstChoice, 'delta');
+        if (!delta || typeof delta !== 'object') {
+          continue;
+        }
+        const content = Reflect.get(delta, 'content');
+        const chunkText = getStreamChunkText(content);
+        if (!chunkText) {
+          continue;
+        }
+        text += chunkText;
+        if (onTextChunk) {
+          await onTextChunk(chunkText);
+        }
+      }
+    }
+  }
+  if (remainder) {
+    const dataLines = parseSseEvent(remainder);
+    for (const line of dataLines) {
+      if (line === '[DONE]') {
+        continue;
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(line);
+      } catch {
+        continue;
+      }
+      if (!parsed || typeof parsed !== 'object') {
+        continue;
+      }
+      const choices = Reflect.get(parsed, 'choices');
+      if (!Array.isArray(choices)) {
+        continue;
+      }
+      const firstChoice = choices[0];
+      if (!firstChoice || typeof firstChoice !== 'object') {
+        continue;
+      }
+      const delta = Reflect.get(firstChoice, 'delta');
+      if (!delta || typeof delta !== 'object') {
+        continue;
+      }
+      const content = Reflect.get(delta, 'content');
+      const chunkText = getStreamChunkText(content);
+      if (!chunkText) {
+        continue;
+      }
+      text += chunkText;
+      if (onTextChunk) {
+        await onTextChunk(chunkText);
+      }
+    }
+  }
+  return {
+    text,
+    type: 'success'
+  };
+};
 const getOpenApiErrorDetails = async response => {
   let parsed;
   try {
@@ -2543,7 +2766,14 @@ const getOpenApiErrorDetails = async response => {
     errorType: typeof errorType === 'string' ? errorType : undefined
   };
 };
-const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApiApiBaseUrl, assetDir, platform) => {
+const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApiApiBaseUrl, assetDir, platform, options) => {
+  const {
+    includeObfuscation = false,
+    onTextChunk,
+    stream
+  } = options ?? {
+    stream: false
+  };
   const completionMessages = messages.map(message => ({
     content: message.text,
     role: message.role
@@ -2553,16 +2783,23 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
   for (let i = 0; i <= maxToolIterations; i++) {
     let response;
     try {
-      response = await fetch(getOpenApiApiEndpoint(openApiApiBaseUrl), {
+      response = await fetch(getOpenApiApiEndpoint(openApiApiBaseUrl, stream), {
         body: JSON.stringify({
           messages: completionMessages,
           model: modelId,
+          ...(stream ? {
+            stream: true
+          } : {}),
+          ...(includeObfuscation ? {
+            include_obfuscation: true
+          } : {}),
           tool_choice: 'auto',
           tools
         }),
         headers: {
           Authorization: `Bearer ${openApiApiKey}`,
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...getClientRequestIdHeader()
         },
         method: 'POST'
       });
@@ -2587,6 +2824,9 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
         type: 'error'
       };
     }
+    if (stream) {
+      return parseOpenApiStream(response, onTextChunk);
+    }
     let parsed;
     try {
       parsed = await response.json();
@@ -2758,7 +2998,8 @@ const getOpenRouterLimitInfo = async (openRouterApiKey, openRouterApiBaseUrl) =>
   try {
     response = await fetch(getOpenRouterKeyEndpoint(openRouterApiBaseUrl), {
       headers: {
-        Authorization: `Bearer ${openRouterApiKey}`
+        Authorization: `Bearer ${openRouterApiKey}`,
+        ...getClientRequestIdHeader()
       },
       method: 'GET'
     });
@@ -2816,7 +3057,8 @@ const getOpenRouterAssistantText = async (messages, modelId, openRouterApiKey, o
         }),
         headers: {
           Authorization: `Bearer ${openRouterApiKey}`,
-          'Content-Type': 'application/json'
+          'Content-Type': 'application/json',
+          ...getClientRequestIdHeader()
         },
         method: 'POST'
       });
@@ -3001,12 +3243,15 @@ const getAiResponse = async ({
   mockApiCommandId,
   models,
   nextMessageId,
+  onTextChunk,
   openApiApiBaseUrl,
   openApiApiKey,
   openRouterApiBaseUrl,
   openRouterApiKey,
+  passIncludeObfuscation = false,
   platform,
   selectedModelId,
+  streamingEnabled = false,
   useMockApi,
   userText
 }) => {
@@ -3014,8 +3259,22 @@ const getAiResponse = async ({
   const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
   const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
   if (usesOpenApiModel) {
-    if (openApiApiKey) {
-      const result = await getOpenApiAssistantText(messages, getOpenApiModelId(selectedModelId), openApiApiKey, openApiApiBaseUrl, assetDir, platform);
+    if (useMockApi) {
+      const result = await getMockOpenApiAssistantText(streamingEnabled, onTextChunk);
+      if (result.type === 'success') {
+        const {
+          text: assistantText
+        } = result;
+        text = assistantText;
+      } else {
+        text = getOpenApiErrorMessage(result);
+      }
+    } else if (openApiApiKey) {
+      const result = await getOpenApiAssistantText(messages, getOpenApiModelId(selectedModelId), openApiApiKey, openApiApiBaseUrl, assetDir, platform, {
+        includeObfuscation: passIncludeObfuscation,
+        onTextChunk,
+        stream: streamingEnabled
+      });
       if (result.type === 'success') {
         const {
           text: assistantText
@@ -3233,6 +3492,67 @@ const focusInput = state => {
   };
 };
 
+const updateMessageTextInSelectedSession = (sessions, selectedSessionId, messageId, text, inProgress) => {
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      messages: session.messages.map(message => {
+        if (message.id !== messageId) {
+          return message;
+        }
+        return {
+          ...message,
+          inProgress,
+          text
+        };
+      })
+    };
+  });
+};
+const handleTextChunkFunction = async (uid, assistantMessageId, chunk, handleTextChunkState) => {
+  const selectedSession = handleTextChunkState.latestState.sessions.find(session => session.id === handleTextChunkState.latestState.selectedSessionId);
+  if (!selectedSession) {
+    return {
+      latestState: handleTextChunkState.latestState,
+      previousState: handleTextChunkState.previousState
+    };
+  }
+  const assistantMessage = selectedSession.messages.find(message => message.id === assistantMessageId);
+  if (!assistantMessage) {
+    return {
+      latestState: handleTextChunkState.latestState,
+      previousState: handleTextChunkState.previousState
+    };
+  }
+  const updatedText = assistantMessage.text + chunk;
+  const updatedSessions = updateMessageTextInSelectedSession(handleTextChunkState.latestState.sessions, handleTextChunkState.latestState.selectedSessionId, assistantMessageId, updatedText, true);
+  const nextState = {
+    ...handleTextChunkState.latestState,
+    sessions: updatedSessions
+  };
+  set(uid, handleTextChunkState.previousState, nextState);
+  // @ts-ignore
+  await invoke('Chat.rerender');
+  return {
+    latestState: nextState,
+    previousState: nextState
+  };
+};
+
+const appendMessageToSelectedSession = (sessions, selectedSessionId, message) => {
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      messages: [...session.messages, message]
+    };
+  });
+};
 const handleSubmit = async state => {
   const {
     assetDir,
@@ -3244,10 +3564,12 @@ const handleSubmit = async state => {
     openApiApiKey,
     openRouterApiBaseUrl,
     openRouterApiKey,
+    passIncludeObfuscation,
     platform,
     selectedModelId,
     selectedSessionId,
     sessions,
+    streamingEnabled,
     useMockApi,
     viewMode
   } = state;
@@ -3265,6 +3587,18 @@ const handleSubmit = async state => {
     text: userText,
     time: userTime
   };
+  const assistantMessageId = `message-${nextMessageId + 1}`;
+  const assistantTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  const inProgressAssistantMessage = {
+    id: assistantMessageId,
+    inProgress: true,
+    role: 'assistant',
+    text: '',
+    time: assistantTime
+  };
   let workingSessions = sessions;
   if (viewMode === 'detail') {
     const loadedSession = await getChatSession(selectedSessionId);
@@ -3282,7 +3616,7 @@ const handleSubmit = async state => {
     const newSessionId = generateSessionId();
     const newSession = {
       id: newSessionId,
-      messages: [userMessage],
+      messages: streamingEnabled ? [userMessage, inProgressAssistantMessage] : [userMessage],
       title: `Chat ${workingSessions.length + 1}`
     };
     await saveChatSession(newSession);
@@ -3298,15 +3632,8 @@ const handleSubmit = async state => {
       viewMode: 'detail'
     });
   } else {
-    const updatedSessions = workingSessions.map(session => {
-      if (session.id !== selectedSessionId) {
-        return session;
-      }
-      return {
-        ...session,
-        messages: [...session.messages, userMessage]
-      };
-    });
+    const updatedWithUser = appendMessageToSelectedSession(workingSessions, selectedSessionId, userMessage);
+    const updatedSessions = streamingEnabled ? appendMessageToSelectedSession(updatedWithUser, selectedSessionId, inProgressAssistantMessage) : updatedWithUser;
     const selectedSession = updatedSessions.find(session => session.id === selectedSessionId);
     if (selectedSession) {
       await saveChatSession(selectedSession);
@@ -3324,39 +3651,44 @@ const handleSubmit = async state => {
   set(state.uid, state, optimisticState);
   // @ts-ignore
   await invoke('Chat.rerender');
+  let handleTextChunkState = {
+    latestState: optimisticState,
+    previousState: optimisticState
+  };
   const selectedOptimisticSession = optimisticState.sessions.find(session => session.id === optimisticState.selectedSessionId);
-  const messages = selectedOptimisticSession?.messages ?? [];
+  const messages = (selectedOptimisticSession?.messages ?? []).filter(message => !message.inProgress);
+  const handleTextChunkFunctionRef = streamingEnabled ? async chunk => {
+    handleTextChunkState = await handleTextChunkFunction(state.uid, assistantMessageId, chunk, handleTextChunkState);
+  } : undefined;
   const assistantMessage = await getAiResponse({
     assetDir,
     messages,
     mockApiCommandId,
     models,
     nextMessageId: optimisticState.nextMessageId,
+    onTextChunk: handleTextChunkFunctionRef,
     openApiApiBaseUrl,
     openApiApiKey,
     openRouterApiBaseUrl,
     openRouterApiKey,
+    passIncludeObfuscation,
     platform,
     selectedModelId,
+    streamingEnabled,
     useMockApi,
     userText
   });
-  const updatedSessions = optimisticState.sessions.map(session => {
-    if (session.id !== optimisticState.selectedSessionId) {
-      return session;
-    }
-    return {
-      ...session,
-      messages: [...session.messages, assistantMessage]
-    };
-  });
-  const selectedSession = updatedSessions.find(session => session.id === optimisticState.selectedSessionId);
+  const {
+    latestState
+  } = handleTextChunkState;
+  const updatedSessions = streamingEnabled ? updateMessageTextInSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessageId, assistantMessage.text, false) : appendMessageToSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessage);
+  const selectedSession = updatedSessions.find(session => session.id === latestState.selectedSessionId);
   if (selectedSession) {
     await saveChatSession(selectedSession);
   }
   return focusInput({
-    ...optimisticState,
-    nextMessageId: optimisticState.nextMessageId + 1,
+    ...latestState,
+    nextMessageId: latestState.nextMessageId + 1,
     sessions: updatedSessions
   });
 };
@@ -3658,6 +3990,25 @@ const handleNewline = async state => {
   return handleInput(state, Composer, `${composerValue}\n`);
 };
 
+const handleChatListScroll = async (state, chatListScrollTop) => {
+  if (state.chatListScrollTop === chatListScrollTop) {
+    return state;
+  }
+  return {
+    ...state,
+    chatListScrollTop
+  };
+};
+const handleMessagesScroll = async (state, messagesScrollTop) => {
+  if (state.messagesScrollTop === messagesScrollTop) {
+    return state;
+  }
+  return {
+    ...state,
+    messagesScrollTop
+  };
+};
+
 const id = 7201;
 const sendMessagePortToExtensionHostWorker = async port => {
   await sendMessagePortToExtensionHostWorker$1(port, id);
@@ -3684,6 +4035,32 @@ const isObject = value => {
   return typeof value === 'object' && value !== null;
 };
 
+const getSavedChatListScrollTop = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    chatListScrollTop
+  } = savedState;
+  if (typeof chatListScrollTop !== 'number') {
+    return undefined;
+  }
+  return chatListScrollTop;
+};
+
+const getSavedMessagesScrollTop = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    messagesScrollTop
+  } = savedState;
+  if (typeof messagesScrollTop !== 'number') {
+    return undefined;
+  }
+  return messagesScrollTop;
+};
+
 const getSavedSelectedModelId = savedState => {
   if (!isObject(savedState)) {
     return undefined;
@@ -3736,6 +4113,63 @@ const getSavedViewMode = savedState => {
   return viewMode;
 };
 
+const loadOpenApiApiKey = async () => {
+  try {
+    const savedOpenApiKey = await get('secrets.openApiKey');
+    if (typeof savedOpenApiKey === 'string' && savedOpenApiKey) {
+      return savedOpenApiKey;
+    }
+    const legacySavedOpenApiApiKey = await get('secrets.openApiApiKey');
+    if (typeof legacySavedOpenApiApiKey === 'string' && legacySavedOpenApiApiKey) {
+      return legacySavedOpenApiApiKey;
+    }
+    const legacySavedOpenAiApiKey = await get('secrets.openAiApiKey');
+    return typeof legacySavedOpenAiApiKey === 'string' ? legacySavedOpenAiApiKey : '';
+  } catch {
+    return '';
+  }
+};
+
+const loadOpenRouterApiKey = async () => {
+  try {
+    const savedOpenRouterApiKey = await get('secrets.openRouterApiKey');
+    return typeof savedOpenRouterApiKey === 'string' ? savedOpenRouterApiKey : '';
+  } catch {
+    return '';
+  }
+};
+
+const loadPassIncludeObfuscation = async () => {
+  try {
+    const savedPassIncludeObfuscation = await get('chatView.passIncludeObfuscation');
+    return typeof savedPassIncludeObfuscation === 'boolean' ? savedPassIncludeObfuscation : false;
+  } catch {
+    return false;
+  }
+};
+
+const loadStreamingEnabled = async () => {
+  try {
+    const savedStreamingEnabled = await get('chatView.streamingEnabled');
+    return typeof savedStreamingEnabled === 'boolean' ? savedStreamingEnabled : false;
+  } catch {
+    return false;
+  }
+};
+
+const loadPreferences = async () => {
+  const openApiApiKey = await loadOpenApiApiKey();
+  const openRouterApiKey = await loadOpenRouterApiKey();
+  const streamingEnabled = await loadStreamingEnabled();
+  const passIncludeObfuscation = await loadPassIncludeObfuscation();
+  return {
+    openApiApiKey,
+    openRouterApiKey,
+    passIncludeObfuscation,
+    streamingEnabled
+  };
+};
+
 const toSummarySession = session => {
   return {
     id: session.id,
@@ -3761,30 +4195,12 @@ const loadSelectedSessionMessages = async (sessions, selectedSessionId) => {
 const loadContent = async (state, savedState) => {
   const savedSelectedModelId = getSavedSelectedModelId(savedState);
   const savedViewMode = getSavedViewMode(savedState);
-  let openApiApiKey = '';
-  try {
-    const savedOpenApiKey = await get('secrets.openApiKey');
-    if (typeof savedOpenApiKey === 'string' && savedOpenApiKey) {
-      openApiApiKey = savedOpenApiKey;
-    } else {
-      const legacySavedOpenApiApiKey = await get('secrets.openApiApiKey');
-      if (typeof legacySavedOpenApiApiKey === 'string' && legacySavedOpenApiApiKey) {
-        openApiApiKey = legacySavedOpenApiApiKey;
-      } else {
-        const legacySavedOpenAiApiKey = await get('secrets.openAiApiKey');
-        openApiApiKey = typeof legacySavedOpenAiApiKey === 'string' ? legacySavedOpenAiApiKey : '';
-      }
-    }
-  } catch {
-    openApiApiKey = '';
-  }
-  let openRouterApiKey = '';
-  try {
-    const savedOpenRouterApiKey = await get('secrets.openRouterApiKey');
-    openRouterApiKey = typeof savedOpenRouterApiKey === 'string' ? savedOpenRouterApiKey : '';
-  } catch {
-    openRouterApiKey = '';
-  }
+  const {
+    openApiApiKey,
+    openRouterApiKey,
+    passIncludeObfuscation,
+    streamingEnabled
+  } = await loadPreferences();
   const legacySavedSessions = getSavedSessions(savedState);
   const storedSessions = await listChatSessions();
   let sessions = storedSessions;
@@ -3802,6 +4218,8 @@ const loadContent = async (state, savedState) => {
   }
   const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
   const preferredModelId = savedSelectedModelId || state.selectedModelId;
+  const chatListScrollTop = getSavedChatListScrollTop(savedState) ?? state.chatListScrollTop;
+  const messagesScrollTop = getSavedMessagesScrollTop(savedState) ?? state.messagesScrollTop;
   const selectedModelId = state.models.some(model => model.id === preferredModelId) ? preferredModelId : state.models[0]?.id || '';
   const selectedSessionId = sessions.some(session => session.id === preferredSessionId) ? preferredSessionId : sessions[0]?.id || '';
   sessions = await loadSelectedSessionMessages(sessions, selectedSessionId);
@@ -3809,18 +4227,37 @@ const loadContent = async (state, savedState) => {
   const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
+    chatListScrollTop,
     initial: false,
+    messagesScrollTop,
     openApiApiKey,
     openApiApiKeyInput: openApiApiKey,
     openRouterApiKey,
     openRouterApiKeyInput: openRouterApiKey,
+    passIncludeObfuscation,
     selectedModelId,
     selectedSessionId,
     sessions,
+    streamingEnabled,
     viewMode
   };
 };
 
+const mockOpenApiStreamFinish = state => {
+  finish();
+  return state;
+};
+
+const mockOpenApiStreamPushChunk = (state, chunk) => {
+  pushChunk(chunk);
+  return state;
+};
+
+const mockOpenApiStreamReset = state => {
+  reset$1();
+  return state;
+};
+
 const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   const {
     sessions: currentSessions
@@ -3855,9 +4292,13 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   };
 };
 
-const getCss = composerHeight => {
+const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily) => {
   return `:root {
   --ChatInputBoxHeight: ${composerHeight}px;
+  --ChatListItemHeight: ${listItemHeight}px;
+  --ChatMessageFontSize: ${chatMessageFontSize}px;
+  --ChatMessageLineHeight: ${chatMessageLineHeight}px;
+  --ChatMessageFontFamily: ${chatMessageFontFamily};
 }`;
 };
 
@@ -3866,10 +4307,14 @@ const getCss = composerHeight => {
 
 const renderCss = (oldState, newState) => {
   const {
+    chatMessageFontFamily,
+    chatMessageFontSize,
+    chatMessageLineHeight,
     composerHeight,
+    listItemHeight,
     uid
   } = newState;
-  const css = getCss(composerHeight);
+  const css = getCss(composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily);
   return [SetCss, uid, css];
 };
 
@@ -3946,6 +4391,8 @@ const HandleClickList = 17;
 const HandleClickDelete = 18;
 const HandleSubmit = 19;
 const HandleModelChange = 20;
+const HandleChatListScroll = 21;
+const HandleMessagesScroll = 22;
 
 const getModelLabel = model => {
   if (model.provider === 'openRouter') {
@@ -4253,18 +4700,20 @@ const getEmptyMessagesDom = () => {
   }, text(startConversation())];
 };
 
-const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle') => {
+const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', messagesScrollTop = 0) => {
   if (messages.length === 0) {
     return getEmptyMessagesDom();
   }
   return [{
     childCount: messages.length,
     className: 'ChatMessages',
+    onScroll: HandleMessagesScroll,
+    scrollTop: messagesScrollTop,
     type: Div
   }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState))];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, messagesScrollTop = 0) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
@@ -4272,7 +4721,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue,
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -4329,7 +4778,7 @@ const getSessionDom = session => {
   }, text('🗑')];
 };
 
-const getChatListDom = (sessions, selectedSessionId) => {
+const getChatListDom = (sessions, selectedSessionId, chatListScrollTop = 0) => {
   if (sessions.length === 0) {
     return getEmptyChatSessionsDom();
   }
@@ -4337,16 +4786,18 @@ const getChatListDom = (sessions, selectedSessionId) => {
     childCount: sessions.length,
     className: ChatList,
     onClick: HandleClickList,
+    onScroll: HandleChatListScroll,
+    scrollTop: chatListScrollTop,
     type: Div
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions, selectedSessionId, chatListScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -4356,12 +4807,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text(unknownViewMode())];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0, messagesScrollTop = 0) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, messagesScrollTop);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -4369,12 +4820,14 @@ const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRoute
 
 const renderItems = (oldState, newState) => {
   const {
+    chatListScrollTop,
     composerFontFamily,
     composerFontSize,
     composerHeight,
     composerLineHeight,
     composerValue,
     initial,
+    messagesScrollTop,
     models,
     openApiApiKeyInput,
     openRouterApiKeyInput,
@@ -4391,7 +4844,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop);
   return [SetDom2, uid, dom];
 };
 
@@ -4402,6 +4855,14 @@ const renderIncremental = (oldState, newState) => {
   return [SetPatches, newState.uid, patches];
 };
 
+const renderScrollTop = (oldState, newState) => {
+  const {
+    messagesScrollTop,
+    uid
+  } = newState;
+  return [SetProperty, uid, '.ChatMessages', 'scrollTop', messagesScrollTop];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     composerValue
@@ -4421,6 +4882,8 @@ const getRenderer = diffType => {
       return renderIncremental;
     case RenderItems:
       return renderItems;
+    case RenderScrollTop:
+      return renderScrollTop;
     case RenderValue:
       return renderValue;
     default:
@@ -4482,6 +4945,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleModelChange,
     params: ['handleModelChange', TargetValue]
+  }, {
+    name: HandleChatListScroll,
+    params: ['handleChatListScroll', 'event.target.scrollTop']
+  }, {
+    name: HandleMessagesScroll,
+    params: ['handleMessagesScroll', 'event.target.scrollTop']
   }, {
     name: HandleFocus,
     params: ['handleInputFocus', TargetName]
@@ -4505,8 +4974,10 @@ const reset = async state => {
     composerHeight: getMinComposerHeightForState(state),
     composerValue: '',
     openRouterApiKey: '',
+    selectedModelId: 'test',
     selectedSessionId: '',
     sessions: [],
+    streamingEnabled: false,
     viewMode: 'list'
   };
 };
@@ -4520,8 +4991,10 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
+    chatListScrollTop,
     composerValue,
     height,
+    messagesScrollTop,
     nextMessageId,
     renamingSessionId,
     selectedModelId,
@@ -4532,8 +5005,10 @@ const saveState = state => {
     y
   } = state;
   return {
+    chatListScrollTop,
     composerValue,
     height,
+    messagesScrollTop,
     nextMessageId,
     renamingSessionId,
     selectedModelId,
@@ -4567,6 +5042,13 @@ const setChatList = state => {
   };
 };
 
+const setStreamingEnabled = (state, streamingEnabled) => {
+  return {
+    ...state,
+    streamingEnabled
+  };
+};
+
 const defaultMockApiCommandId = 'ChatE2e.mockApi';
 const useMockApi = (state, value, mockApiCommandId = defaultMockApiCommandId) => {
   if (!value) {
@@ -4591,6 +5073,7 @@ const commandMap = {
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.getSelectedSessionId': wrapGetter(getSelectedSessionId),
   'Chat.handleChatListContextMenu': handleChatListContextMenu,
+  'Chat.handleChatListScroll': wrapCommand(handleChatListScroll),
   'Chat.handleClick': wrapCommand(handleClick),
   'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,
@@ -4601,11 +5084,15 @@ const commandMap = {
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
+  'Chat.handleMessagesScroll': wrapCommand(handleMessagesScroll),
   'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
   'Chat.initialize': initialize,
   'Chat.loadContent': wrapCommand(loadContent),
   'Chat.loadContent2': wrapCommand(loadContent),
+  'Chat.mockOpenApiStreamFinish': wrapCommand(mockOpenApiStreamFinish),
+  'Chat.mockOpenApiStreamPushChunk': wrapCommand(mockOpenApiStreamPushChunk),
+  'Chat.mockOpenApiStreamReset': wrapCommand(mockOpenApiStreamReset),
   'Chat.openMockSession': wrapCommand(openMockSession),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
@@ -4615,6 +5102,7 @@ const commandMap = {
   'Chat.saveState': wrapGetter(saveState),
   'Chat.setChatList': wrapCommand(setChatList),
   'Chat.setOpenRouterApiKey': wrapCommand(setOpenRouterApiKey),
+  'Chat.setStreamingEnabled': wrapCommand(setStreamingEnabled),
   'Chat.terminate': terminate,
   'Chat.useMockApi': wrapCommand(useMockApi)
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/chat-view",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "Chat View Worker",
   "repository": {
     "type": "git",