@lvce-editor/chat-view 1.8.0 → 1.10.0

package/dist/chatViewWorkerMain.js

@@ -1196,12 +1196,12 @@ const settings = i18nString('Settings');
 const closeChat = i18nString('Close Chat');
 const clickToOpenNewChat = i18nString('Click the + button to open a new chat.');
 const startConversation = i18nString('Start a conversation by typing below.');
-const you = i18nString('You');
-const assistant = i18nString('Assistant');
+i18nString('You');
+i18nString('Assistant');
 const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
 const sendMessage = i18nString('Send message');
 const send = i18nString('Send');
-const deleteChatSession = i18nString('Delete chat session');
+const deleteChatSession$1 = i18nString('Delete chat session');
 const defaultSessionTitle = i18nString('Chat 1');
 const dummyChatA = i18nString('Dummy Chat A');
 const dummyChatB = i18nString('Dummy Chat B');
@@ -1209,6 +1209,7 @@ const dummyChatC = i18nString('Dummy Chat C');
 
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
+  const defaultModelId = 'test';
   return {
     assetDir: '',
     composerValue: '',
@@ -1221,16 +1222,33 @@ const createDefaultState = () => {
     inputSource: 'script',
     lastSubmittedSessionId: '',
     listItemHeight: 40,
+    models: [{
+      id: defaultModelId,
+      name: 'test'
+    }, {
+      id: 'codex-5.3',
+      name: 'Codex 5.3'
+    }, {
+      id: 'claude-code',
+      name: 'Claude Code'
+    }, {
+      id: 'claude-haiku',
+      name: 'Claude Haiku'
+    }],
     nextMessageId: 1,
     platform: 0,
     renamingSessionId: '',
+    selectedModelId: defaultModelId,
     selectedSessionId: defaultSessionId,
     sessions: [{
       id: defaultSessionId,
       messages: [],
       title: defaultSessionTitle
     }],
+    tokensMax: 0,
+    tokensUsed: 0,
     uid: 0,
+    usageOverviewEnabled: false,
     viewMode: 'list',
     warningCount: 0,
     width: 0,
@@ -1274,7 +1292,7 @@ const diffFocus = (oldState, newState) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.viewMode === newState.viewMode;
+  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 RenderItems = 4;
@@ -1338,6 +1356,8 @@ const Span = 8;
 const Text = 12;
 const P = 50;
 const TextArea = 62;
+const Select$1 = 63;
+const Option$1 = 64;
 const Reference = 100;
 
 const Enter = 3;
@@ -1667,17 +1687,170 @@ const handleChatListContextMenu = async (name, x, y) => {
   await invoke('ContextMenu.show', x, y, CHAT_LIST_ITEM_CONTEXT_MENU, sessionId);
 };
 
+const LVCE_CHAT_SESSIONS_DB_NAME = 'lvce-chat-view-sessions';
+const LVCE_CHAT_SESSIONS_DB_VERSION = 1;
+const LVCE_CHAT_SESSIONS_STORE = 'chat-sessions';
+const toError = error => {
+  if (error instanceof Error) {
+    return error;
+  }
+  return new Error('IndexedDB request failed');
+};
+const requestToPromise = async createRequest => {
+  const request = createRequest();
+  return new Promise((resolve, reject) => {
+    request.addEventListener('success', () => {
+      resolve(request.result);
+    });
+    request.addEventListener('error', () => {
+      reject(toError(request.error));
+    });
+  });
+};
+const transactionToPromise = async createTransaction => {
+  const transaction = createTransaction();
+  return new Promise((resolve, reject) => {
+    transaction.addEventListener('complete', () => {
+      resolve();
+    });
+    transaction.addEventListener('error', () => {
+      reject(toError(transaction.error));
+    });
+    transaction.addEventListener('abort', () => {
+      reject(toError(transaction.error));
+    });
+  });
+};
+const openSessionsDatabase = async () => {
+  const request = indexedDB.open(LVCE_CHAT_SESSIONS_DB_NAME, LVCE_CHAT_SESSIONS_DB_VERSION);
+  request.addEventListener('upgradeneeded', () => {
+    const database = request.result;
+    if (!database.objectStoreNames.contains(LVCE_CHAT_SESSIONS_STORE)) {
+      database.createObjectStore(LVCE_CHAT_SESSIONS_STORE, {
+        keyPath: 'id'
+      });
+    }
+  });
+  return requestToPromise(() => request);
+};
+class IndexedDbChatSessionStorage {
+  async getDatabase() {
+    if (!this.databasePromise) {
+      this.databasePromise = openSessionsDatabase();
+    }
+    return this.databasePromise;
+  }
+  async clear() {
+    const database = await this.getDatabase();
+    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
+    const createTransaction = () => transaction;
+    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
+    store.clear();
+    await transactionToPromise(createTransaction);
+  }
+  async deleteSession(id) {
+    const database = await this.getDatabase();
+    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
+    const createTransaction = () => transaction;
+    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
+    store.delete(id);
+    await transactionToPromise(createTransaction);
+  }
+  async getSession(id) {
+    const database = await this.getDatabase();
+    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readonly');
+    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
+    const result = await requestToPromise(() => store.get(id));
+    return result;
+  }
+  async listSessions() {
+    const database = await this.getDatabase();
+    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readonly');
+    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
+    const result = await requestToPromise(() => store.getAll());
+    return result;
+  }
+  async setSession(session) {
+    const database = await this.getDatabase();
+    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
+    const createTransaction = () => transaction;
+    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
+    store.put(session);
+    await transactionToPromise(createTransaction);
+  }
+}
+
+class InMemoryChatSessionStorage {
+  sessions = new Map();
+  async clear() {
+    this.sessions.clear();
+  }
+  async deleteSession(id) {
+    this.sessions.delete(id);
+  }
+  async getSession(id) {
+    return this.sessions.get(id);
+  }
+  async listSessions() {
+    return [...this.sessions.values()];
+  }
+  async setSession(session) {
+    this.sessions.set(session.id, session);
+  }
+}
+
+const createDefaultStorage = () => {
+  if (typeof indexedDB === 'undefined') {
+    return new InMemoryChatSessionStorage();
+  }
+  return new IndexedDbChatSessionStorage();
+};
+let chatSessionStorage = createDefaultStorage();
+const listChatSessions = async () => {
+  const sessions = await chatSessionStorage.listSessions();
+  return sessions.map(session => ({
+    id: session.id,
+    messages: [],
+    title: session.title
+  }));
+};
+const getChatSession = async id => {
+  const session = await chatSessionStorage.getSession(id);
+  if (!session) {
+    return undefined;
+  }
+  return {
+    id: session.id,
+    messages: [...session.messages],
+    title: session.title
+  };
+};
+const saveChatSession = async session => {
+  await chatSessionStorage.setSession({
+    id: session.id,
+    messages: [...session.messages],
+    title: session.title
+  });
+};
+const deleteChatSession = async id => {
+  await chatSessionStorage.deleteSession(id);
+};
+const clearChatSessions = async () => {
+  await chatSessionStorage.clear();
+};
+
 const generateSessionId = () => {
   return crypto.randomUUID();
 };
 
-const createSession = state => {
+const createSession = async state => {
   const id = generateSessionId();
   const session = {
     id,
     messages: [],
     title: `Chat ${state.sessions.length + 1}`
   };
+  await saveChatSession(session);
   return {
     ...state,
     renamingSessionId: '',
@@ -1698,7 +1871,7 @@ const getNextSelectedSessionId = (sessions, deletedId) => {
   return sessions[nextIndex].id;
 };
 
-const deleteSession = (state, id) => {
+const deleteSession = async (state, id) => {
   const {
     renamingSessionId,
     sessions
@@ -1707,6 +1880,7 @@ const deleteSession = (state, id) => {
   if (filtered.length === sessions.length) {
     return state;
   }
+  await deleteChatSession(id);
   if (filtered.length === 0) {
     return {
       ...state,
@@ -1716,11 +1890,22 @@ const deleteSession = (state, id) => {
       viewMode: 'list'
     };
   }
+  const nextSelectedSessionId = getNextSelectedSessionId(filtered, id);
+  const loadedSession = await getChatSession(nextSelectedSessionId);
+  const hydratedSessions = filtered.map(session => {
+    if (session.id !== nextSelectedSessionId) {
+      return session;
+    }
+    if (!loadedSession) {
+      return session;
+    }
+    return loadedSession;
+  });
   return {
     ...state,
     renamingSessionId: renamingSessionId === id ? '' : renamingSessionId,
-    selectedSessionId: getNextSelectedSessionId(filtered, id),
-    sessions: filtered
+    selectedSessionId: nextSelectedSessionId,
+    sessions: hydratedSessions
   };
 };
 
@@ -1774,14 +1959,27 @@ const handleSubmit = async state => {
     text: userText,
     time: userTime
   };
+  let workingSessions = sessions;
+  if (viewMode === 'detail') {
+    const loadedSession = await getChatSession(selectedSessionId);
+    if (loadedSession) {
+      workingSessions = sessions.map(session => {
+        if (session.id !== selectedSessionId) {
+          return session;
+        }
+        return loadedSession;
+      });
+    }
+  }
   let optimisticState;
   if (viewMode === 'list') {
     const newSessionId = generateSessionId();
     const newSession = {
       id: newSessionId,
       messages: [userMessage],
-      title: `Chat ${sessions.length + 1}`
+      title: `Chat ${workingSessions.length + 1}`
     };
+    await saveChatSession(newSession);
     optimisticState = focusInput({
       ...state,
       composerValue: '',
@@ -1789,11 +1987,11 @@ const handleSubmit = async state => {
       lastSubmittedSessionId: newSessionId,
       nextMessageId: nextMessageId + 1,
       selectedSessionId: newSessionId,
-      sessions: [...sessions, newSession],
+      sessions: [...workingSessions, newSession],
       viewMode: 'detail'
     });
   } else {
-    const updatedSessions = sessions.map(session => {
+    const updatedSessions = workingSessions.map(session => {
       if (session.id !== selectedSessionId) {
         return session;
       }
@@ -1802,6 +2000,10 @@ const handleSubmit = async state => {
         messages: [...session.messages, userMessage]
       };
     });
+    const selectedSession = updatedSessions.find(session => session.id === selectedSessionId);
+    if (selectedSession) {
+      await saveChatSession(selectedSession);
+    }
     optimisticState = focusInput({
       ...state,
       composerValue: '',
@@ -1824,6 +2026,10 @@ const handleSubmit = async state => {
       messages: [...session.messages, assistantMessage]
     };
   });
+  const selectedSession = updatedSessions.find(session => session.id === optimisticState.selectedSessionId);
+  if (selectedSession) {
+    await saveChatSession(selectedSession);
+  }
   return focusInput({
     ...optimisticState,
     nextMessageId: optimisticState.nextMessageId + 1,
@@ -1845,15 +2051,26 @@ const handleClickSend = async state => {
   return handleSubmit(submitState);
 };
 
-const selectSession = (state, id) => {
+const selectSession = async (state, id) => {
   const exists = state.sessions.some(session => session.id === id);
   if (!exists) {
     return state;
   }
+  const loadedSession = await getChatSession(id);
+  const sessions = state.sessions.map(session => {
+    if (session.id !== id) {
+      return session;
+    }
+    if (!loadedSession) {
+      return session;
+    }
+    return loadedSession;
+  });
   return {
     ...state,
     renamingSessionId: '',
     selectedSessionId: id,
+    sessions,
     viewMode: 'detail'
   };
 };
@@ -2007,7 +2224,7 @@ const handleInputFocus = async (state, name) => {
   };
 };
 
-const submitRename = state => {
+const submitRename = async state => {
   const {
     composerValue,
     renamingSessionId,
@@ -2029,6 +2246,10 @@ const submitRename = state => {
       title
     };
   });
+  const renamedSession = updatedSessions.find(session => session.id === renamingSessionId);
+  if (renamedSession) {
+    await saveChatSession(renamedSession);
+  }
   return {
     ...state,
     composerValue: '',
@@ -2061,6 +2282,13 @@ const handleKeyDown = async (state, key, shiftKey) => {
   return handleSubmit(submitState);
 };
 
+const handleModelChange = async (state, value) => {
+  return {
+    ...state,
+    selectedModelId: value
+  };
+};
+
 const handleNewline = async state => {
   return handleInput(state, `${state.composerValue}\n`);
 };
@@ -2121,6 +2349,19 @@ const getSavedBounds = savedState => {
   };
 };
 
+const getSavedSelectedModelId = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    selectedModelId
+  } = savedState;
+  if (typeof selectedModelId !== 'string') {
+    return undefined;
+  }
+  return selectedModelId;
+};
+
 const getSavedSelectedSessionId = savedState => {
   if (!isObject(savedState)) {
     return undefined;
@@ -2147,23 +2388,79 @@ const getSavedSessions = savedState => {
   return sessions;
 };
 
+const getSavedViewMode = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    viewMode
+  } = savedState;
+  if (viewMode !== 'list' && viewMode !== 'detail') {
+    return undefined;
+  }
+  return viewMode;
+};
+
+const toSummarySession = session => {
+  return {
+    id: session.id,
+    messages: [],
+    title: session.title
+  };
+};
+const loadSelectedSessionMessages = async (sessions, selectedSessionId) => {
+  if (!selectedSessionId) {
+    return sessions;
+  }
+  const loadedSession = await getChatSession(selectedSessionId);
+  if (!loadedSession) {
+    return sessions;
+  }
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return loadedSession;
+  });
+};
 const loadContent = async (state, savedState) => {
   const savedBounds = getSavedBounds(savedState);
-  const sessions = getSavedSessions(savedState) || state.sessions;
+  const savedSelectedModelId = getSavedSelectedModelId(savedState);
+  const savedViewMode = getSavedViewMode(savedState);
+  const legacySavedSessions = getSavedSessions(savedState);
+  const storedSessions = await listChatSessions();
+  let sessions = storedSessions;
+  if (sessions.length === 0 && legacySavedSessions && legacySavedSessions.length > 0) {
+    for (const session of legacySavedSessions) {
+      await saveChatSession(session);
+    }
+    sessions = legacySavedSessions.map(toSummarySession);
+  }
+  if (sessions.length === 0 && state.sessions.length > 0) {
+    for (const session of state.sessions) {
+      await saveChatSession(session);
+    }
+    sessions = state.sessions.map(toSummarySession);
+  }
   const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
+  const preferredModelId = savedSelectedModelId || state.selectedModelId;
+  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 || '';
-  const viewMode = sessions.length === 0 ? 'list' : state.viewMode === 'detail' ? 'detail' : 'list';
+  sessions = await loadSelectedSessionMessages(sessions, selectedSessionId);
+  const preferredViewMode = savedViewMode || state.viewMode;
+  const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
     ...savedBounds,
     initial: false,
+    selectedModelId,
     selectedSessionId,
     sessions,
     viewMode
   };
 };
 
-const openMockSession = (state, mockSessionId, mockChatMessages) => {
+const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   if (!mockSessionId) {
     return state;
   }
@@ -2181,6 +2478,10 @@ const openMockSession = (state, mockSessionId, mockChatMessages) => {
     messages: mockChatMessages,
     title: mockSessionId
   }];
+  const selectedSession = sessions.find(session => session.id === mockSessionId);
+  if (selectedSession) {
+    await saveChatSession(selectedSession);
+  }
   return {
     ...state,
     renamingSessionId: '',
@@ -2226,6 +2527,8 @@ const renderFocusContext = (oldState, newState) => {
 const ChatActions = 'ChatActions';
 const ChatName = 'ChatName';
 const ChatSendArea = 'ChatSendArea';
+const ChatSendAreaBottom = 'ChatSendAreaBottom';
+const ChatSendAreaContent = 'ChatSendAreaContent';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
 const Button = 'Button';
@@ -2233,12 +2536,22 @@ const ButtonDisabled = 'ButtonDisabled';
 const ButtonPrimary = 'ButtonPrimary';
 const IconButton = 'IconButton';
 const Label = 'Label';
+const LabelDetail = 'LabelDetail';
 const ChatList = 'ChatList';
+const ChatListEmpty = 'ChatListEmpty';
 const ChatListItem = 'ChatListItem';
 const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
+const ChatMessageContent = 'ChatMessageContent';
+const MessageUser = 'MessageUser';
+const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
+const Option = 'Option';
+const TokenUsageOverview = 'TokenUsageOverview';
+const TokenUsageRing = 'TokenUsageRing';
+const TokenUsageRingInner = 'TokenUsageRingInner';
+const Select = 'Select';
 const Viewlet = 'Viewlet';
 const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
@@ -2254,14 +2567,78 @@ const HandleClickBack = 16;
 const HandleClickList = 17;
 const HandleClickDelete = 18;
 const HandleSubmit = 19;
+const HandleModelChange = 20;
 
-const getChatSendAreaDom = composerValue => {
-  const isSendDisabled = composerValue.trim() === '';
+const getModelOptionDOm = (model, selectedModelId) => {
+  return [{
+    childCount: 1,
+    className: Option,
+    selected: model.id === selectedModelId,
+    type: Option$1,
+    value: model.id
+  }, text(model.name)];
+};
+
+const getSendButtonDom = isSendDisabled => {
   const sendButtonClassName = isSendDisabled ? `${Button} ${ButtonPrimary} ${ButtonDisabled}` : `${Button} ${ButtonPrimary}`;
   return [{
-    childCount: 2,
+    childCount: 1,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
+    role: Button$2,
+    title: sendMessage,
+    type: Button$1
+  }, text(send)];
+};
+
+const clampToPercentage = (tokensUsed, tokensMax) => {
+  if (tokensMax <= 0) {
+    return 0;
+  }
+  const percentage = tokensUsed / tokensMax * 100;
+  return Math.max(0, Math.min(100, percentage));
+};
+
+const getUsageOverviewDom = (tokensUsed, tokensMax) => {
+  const usagePercent = clampToPercentage(tokensUsed, tokensMax);
+  const usageLabel = `${tokensUsed} / ${tokensMax}`;
+  const usageTitle = `${tokensUsed} of ${tokensMax} tokens used (${Math.round(usagePercent)}%)`;
+  return [{
+    childCount: 3,
+    className: TokenUsageOverview,
+    type: Div
+  }, {
+    childCount: 1,
+    className: TokenUsageRing,
+    style: `background: conic-gradient(var(--vscode-button-background) ${usagePercent}%, var(--vscode-editorWidget-border) 0);`,
+    title: usageTitle,
+    type: Div
+  }, {
+    childCount: 0,
+    className: TokenUsageRingInner,
+    style: 'background: var(--vscode-editor-background);',
+    type: Div
+  }, {
+    childCount: 1,
+    className: LabelDetail,
+    title: usageTitle,
+    type: Span
+  }, text(usageLabel)];
+};
+
+const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+  const isSendDisabled = composerValue.trim() === '';
+  const modelOptions = models.flatMap(model => getModelOptionDOm(model, selectedModelId));
+  return [{
+    childCount: 1,
     className: ChatSendArea,
     type: Div
+  }, {
+    childCount: 2,
+    className: ChatSendAreaContent,
+    type: Div
   }, {
     childCount: 0,
     className: MultilineInputBox,
@@ -2272,15 +2649,17 @@ const getChatSendAreaDom = composerValue => {
     type: TextArea,
     value: composerValue
   }, {
-    childCount: 1,
-    className: sendButtonClassName,
-    disabled: isSendDisabled,
-    name: 'send',
-    onClick: HandleSubmit,
-    role: Button$2,
-    title: sendMessage,
-    type: Button$1
-  }, text(send)];
+    childCount: usageOverviewEnabled ? 3 : 2,
+    className: ChatSendAreaBottom,
+    type: Div
+  }, {
+    childCount: models.length,
+    className: Select,
+    name: 'model',
+    onInput: HandleModelChange,
+    type: Select$1,
+    value: selectedModelId
+  }, ...modelOptions, ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...getSendButtonDom(isSendDisabled)];
 };
 
 const getHeaderActionVirtualDom = item => {
@@ -2328,7 +2707,11 @@ const getChatHeaderBackButtonVirtualDom = () => {
     role: Button$2,
     title: backToChats,
     type: Button$1
-  }, text('←')];
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconArrowLeft',
+    type: Div
+  }];
 };
 
 const getChatHeaderDomDetailMode = selectedSessionTitle => {
@@ -2348,15 +2731,16 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
 };
 
 const getChatMessageDom = message => {
+  const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   return [{
-    childCount: 2,
-    className: Message,
+    childCount: 1,
+    className: mergeClassNames(Message, roleClassName),
     type: Div
   }, {
     childCount: 1,
-    className: Label,
+    className: ChatMessageContent,
     type: Div
-  }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
+  }, {
     childCount: 1,
     className: Markdown,
     type: P
@@ -2378,7 +2762,7 @@ const getMessagesDom = messages => {
   }, ...messages.flatMap(getChatMessageDom)];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle;
   const messages = selectedSession ? selectedSession.messages : [];
@@ -2386,7 +2770,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue)
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2404,7 +2788,7 @@ const getChatHeaderListModeDom = () => {
 const getEmptyChatSessionsDom = () => {
   return [{
     childCount: 1,
-    className: ChatList,
+    className: ChatListEmpty,
     type: Div
   }, {
     childCount: 1,
@@ -2438,7 +2822,7 @@ const getSessionDom = session => {
     onClick: HandleClickDelete,
     role: Button$2,
     tabIndex: 0,
-    title: deleteChatSession,
+    title: deleteChatSession$1,
     type: Button$1
   }, text('🗑')];
 };
@@ -2455,12 +2839,12 @@ const getChatListDom = (sessions, selectedSessionId) => {
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -2470,12 +2854,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text('Unknown view mode')];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -2485,15 +2869,20 @@ const renderItems = (oldState, newState) => {
   const {
     composerValue,
     initial,
+    models,
+    selectedModelId,
     selectedSessionId,
     sessions,
+    tokensMax,
+    tokensUsed,
     uid,
+    usageOverviewEnabled,
     viewMode
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
   return [SetDom2, uid, dom];
 };
 
@@ -2581,6 +2970,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleInput,
     params: ['handleInput', TargetValue]
+  }, {
+    name: HandleModelChange,
+    params: ['handleModelChange', TargetValue]
   }, {
     name: HandleFocus,
     params: ['handleInputFocus', TargetName]
@@ -2598,6 +2990,7 @@ const rerender = state => {
 };
 
 const reset = async state => {
+  await clearChatSessions();
   return {
     ...state,
     composerValue: '',
@@ -2620,8 +3013,8 @@ const saveState = state => {
     height,
     nextMessageId,
     renamingSessionId,
+    selectedModelId,
     selectedSessionId,
-    sessions,
     viewMode,
     width,
     x,
@@ -2632,8 +3025,8 @@ const saveState = state => {
     height,
     nextMessageId,
     renamingSessionId,
+    selectedModelId,
     selectedSessionId,
-    sessions,
     viewMode,
     width,
     x,
@@ -2681,6 +3074,7 @@ const commandMap = {
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
+  'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
   'Chat.initialize': initialize,
   'Chat.loadContent': wrapCommand(loadContent),

package/package.json

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