@lvce-editor/chat-view 6.21.0 → 6.22.0

package/dist/chatViewWorkerMain.js

@@ -1407,6 +1407,104 @@ const terminate = () => {
   globalThis.close();
 };
 
+const getVisibleSessions = (sessions, selectedProjectId) => {
+  if (!selectedProjectId) {
+    return sessions;
+  }
+  const hasAssignedProjects = sessions.some(session => !!session.projectId);
+  if (!hasAssignedProjects) {
+    return sessions;
+  }
+  return sessions.filter(session => session.projectId === selectedProjectId);
+};
+
+const chatListFocusFirst = async state => {
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (visibleSessions.length === 0) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  return {
+    ...state,
+    focus: 'list',
+    focused: true,
+    listFocusedIndex: 0
+  };
+};
+
+const chatListFocusLast = async state => {
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (visibleSessions.length === 0) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  return {
+    ...state,
+    focus: 'list',
+    focused: true,
+    listFocusedIndex: visibleSessions.length - 1
+  };
+};
+
+const getListFocusIndex = state => {
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (visibleSessions.length === 0) {
+    return -1;
+  }
+  if (state.listFocusedIndex >= 0 && state.listFocusedIndex < visibleSessions.length) {
+    return state.listFocusedIndex;
+  }
+  return -1;
+};
+
+const chatListFocusNext = async state => {
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (visibleSessions.length === 0) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  const currentIndex = getListFocusIndex(state);
+  const nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, visibleSessions.length - 1);
+  return {
+    ...state,
+    focus: 'list',
+    focused: true,
+    listFocusedIndex: nextIndex
+  };
+};
+
+const chatListFocusPrevious = async state => {
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (visibleSessions.length === 0) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  const currentIndex = getListFocusIndex(state);
+  const previousIndex = currentIndex === -1 ? visibleSessions.length - 1 : Math.max(currentIndex - 1, 0);
+  return {
+    ...state,
+    focus: 'list',
+    focused: true,
+    listFocusedIndex: previousIndex
+  };
+};
+
 const measureTextBlockHeight = async (text, fontFamily, fontSize, lineHeight, width) => {
   // Upstream renderer types currently require number, but runtime accepts px strings.
   // Keep forwarding the string to preserve chat-view behavior until upstream is updated.
@@ -1495,12 +1593,18 @@ const chats = () => {
 const newChat = () => {
   return i18nString('New Chat');
 };
+const addProject = () => {
+  return i18nString('Add Project');
+};
 const debug = () => {
   return i18nString('Debug');
 };
 const backToChats = () => {
   return i18nString('Back to chats');
 };
+const backToChatList = () => {
+  return i18nString('Back to chat list');
+};
 const settings = () => {
   return i18nString('Settings');
 };
@@ -1714,6 +1818,7 @@ const createDefaultState = () => {
     inputSource: 'script',
     lastNormalViewMode: 'list',
     lastSubmittedSessionId: '',
+    listFocusedIndex: -1,
     listItemHeight: 40,
     maxComposerRows: 5,
     messagesAutoScrollEnabled: true,
@@ -2485,17 +2590,6 @@ const getNextSelectedSessionId = (sessions, deletedId) => {
   return sessions[nextIndex].id;
 };
 
-const getVisibleSessions = (sessions, selectedProjectId) => {
-  if (!selectedProjectId) {
-    return sessions;
-  }
-  const hasAssignedProjects = sessions.some(session => !!session.projectId);
-  if (!hasAssignedProjects) {
-    return sessions;
-  }
-  return sessions.filter(session => session.projectId === selectedProjectId);
-};
-
 const deleteSession = async (state, id) => {
   const {
     renamingSessionId,
@@ -2613,7 +2707,7 @@ const isEqualProjectExpandedIds = (a, b) => {
   return true;
 };
 const isEqual = (oldState, newState) => {
-  return oldState.addContextButtonEnabled === newState.addContextButtonEnabled && oldState.authEnabled === newState.authEnabled && oldState.authErrorMessage === newState.authErrorMessage && oldState.authStatus === newState.authStatus && oldState.composerDropActive === newState.composerDropActive && oldState.composerDropEnabled === newState.composerDropEnabled && oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.modelPickerOpen === newState.modelPickerOpen && oldState.modelPickerSearchValue === newState.modelPickerSearchValue && oldState.newChatModelPickerEnabled === newState.newChatModelPickerEnabled && isEqualProjectExpandedIds(oldState.projectExpandedIds, newState.projectExpandedIds) && oldState.projectListScrollTop === newState.projectListScrollTop && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedProjectId === newState.selectedProjectId && oldState.selectedSessionId === newState.selectedSessionId && oldState.showRunMode === newState.showRunMode && oldState.runMode === newState.runMode && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.useChatMathWorker === newState.useChatMathWorker && oldState.viewMode === newState.viewMode && oldState.voiceDictationEnabled === newState.voiceDictationEnabled;
+  return oldState.addContextButtonEnabled === newState.addContextButtonEnabled && oldState.authEnabled === newState.authEnabled && oldState.authErrorMessage === newState.authErrorMessage && oldState.authStatus === newState.authStatus && oldState.composerDropActive === newState.composerDropActive && oldState.composerDropEnabled === newState.composerDropEnabled && oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.modelPickerOpen === newState.modelPickerOpen && oldState.modelPickerSearchValue === newState.modelPickerSearchValue && oldState.newChatModelPickerEnabled === newState.newChatModelPickerEnabled && oldState.listFocusedIndex === newState.listFocusedIndex && isEqualProjectExpandedIds(oldState.projectExpandedIds, newState.projectExpandedIds) && oldState.projectListScrollTop === newState.projectListScrollTop && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedProjectId === newState.selectedProjectId && oldState.selectedSessionId === newState.selectedSessionId && oldState.showRunMode === newState.showRunMode && oldState.runMode === newState.runMode && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.useChatMathWorker === newState.useChatMathWorker && oldState.viewMode === newState.viewMode && oldState.voiceDictationEnabled === newState.voiceDictationEnabled;
 };
 
 const diffScrollTop = (oldState, newState) => {
@@ -3026,23 +3120,158 @@ const deleteItem = () => {
   return i18nString(Delete);
 };
 
-const getMenuEntriesChatList = () => {
+const getMenuEntriesChatHeader = () => {
+  // TODO
   return [{
+    command: 'Chat.handleInputCut',
+    flags: None,
+    id: 'cut',
+    label: cut()
+  }, {
+    command: 'Chat.handleInputCopy',
+    flags: None,
+    id: 'copy',
+    label: copy()
+  }, {
+    command: 'Chat.handleInputPaste',
+    flags: None,
+    id: 'copy',
+    label: paste()
+  }];
+};
+
+const getMenuEntriesChatInput = () => {
+  return [{
+    command: 'Chat.handleInputCut',
+    flags: None,
+    id: 'cut',
+    label: cut()
+  }, {
+    command: 'Chat.handleInputCopy',
+    flags: None,
+    id: 'copy',
+    label: copy()
+  }, {
+    command: 'Chat.handleInputPaste',
+    flags: None,
+    id: 'copy',
+    label: paste()
+  }];
+};
+
+const getMenuEntriesChatList = (sessionId = '') => {
+  return [{
+    args: [sessionId],
     command: 'Chat.handleClickRename',
     flags: None,
     id: 'rename',
     label: rename()
   }, {
-    command: 'Chat.handleClickArchive',
+    args: [sessionId],
+    command: 'Chat.handleClickDelete',
     flags: None,
     id: 'archive',
     label: archive()
   }];
 };
 
+const Composer = 'composer';
+const Search = 'search';
+const ComposerDropTarget = 'composer-drop-target';
+const AddContext = 'add-context';
+const Dictate = 'dictate';
+const Send = 'send';
+const Back = 'back';
+const Model = 'model';
+const ModelPickerToggle = 'model-picker-toggle';
+const ModelPickerSearch = 'model-picker-search';
+const ModelPickerSettings = 'model-picker-settings';
+const RunMode = 'runMode';
+const ToggleChatFocus = 'toggle-chat-focus';
+const ToggleSearch = 'toggle-search';
+const ChatList$1 = 'chat-list';
+const CreateProject = 'create-project';
+const CreateSession = 'create-session';
+const CreateSessionInProjectPrefix = 'create-session-in-project:';
+const SessionDebug = 'session-debug';
+const Settings = 'settings';
+const Login = 'login';
+const Logout = 'logout';
+const CloseChat = 'close-chat';
+const SessionDelete = 'SessionDelete';
+const ProjectPrefix = 'project:';
+const SessionPrefix = 'session:';
+const RenamePrefix = 'session-rename:';
+const ModelPickerItemPrefix = 'model-picker-item:';
+const getProjectInputName = projectId => {
+  return `${ProjectPrefix}${projectId}`;
+};
+const getCreateSessionInProjectInputName = projectId => {
+  return `${CreateSessionInProjectPrefix}${projectId}`;
+};
+const isCreateSessionInProjectInputName = name => {
+  return name.startsWith(CreateSessionInProjectPrefix);
+};
+const getProjectIdFromCreateSessionInProjectInputName = name => {
+  return name.slice(CreateSessionInProjectPrefix.length);
+};
+const isProjectInputName = name => {
+  return name.startsWith(ProjectPrefix);
+};
+const getProjectIdFromInputName = name => {
+  return name.slice(ProjectPrefix.length);
+};
+const getSessionInputName = sessionId => {
+  return `${SessionPrefix}${sessionId}`;
+};
+const isSessionInputName = name => {
+  return name.startsWith(SessionPrefix);
+};
+const getSessionIdFromInputName = name => {
+  return name.slice(SessionPrefix.length);
+};
+const isRenameInputName = name => {
+  return name.startsWith(RenamePrefix);
+};
+const getRenameIdFromInputName = name => {
+  return name.slice(RenamePrefix.length);
+};
+const getModelPickerItemInputName = modelId => {
+  return `${ModelPickerItemPrefix}${modelId}`;
+};
+const isModelPickerItemInputName = name => {
+  return name.startsWith(ModelPickerItemPrefix);
+};
+const getModelIdFromModelPickerItemInputName = name => {
+  return name.slice(ModelPickerItemPrefix.length);
+};
+
+const menuEntryAddProject = {
+  args: [CreateProject],
+  command: 'Chat.handleClick',
+  flags: None,
+  id: 'addProject',
+  label: addProject()
+};
+const getMenuEntriesChatProjectList = (projectId = '') => {
+  if (!projectId) {
+    return [menuEntryAddProject];
+  }
+  return [{
+    args: [getCreateSessionInProjectInputName(projectId)],
+    command: 'Chat.handleClick',
+    flags: None,
+    id: 'newChat',
+    label: newChat()
+  }, menuEntryAddProject];
+};
+
 const MenuChatList = 2178;
+const MenuChatHeader = 2179;
+const MenuChatInput = 2180;
+const MenuChatProjectList = 2181;
 const getMenuEntryIds = () => {
-  return [Chat$1, MenuChatList];
+  return [Chat$1, MenuChatList, MenuChatHeader, MenuChatInput, MenuChatProjectList];
 };
 
 const menuEntrySeparator = {
@@ -3115,10 +3344,16 @@ const menuEntryDelete = {
 const getMenuEntriesFile = () => {
   return [menuEntryCopyAsE2eTest, menuEntryOpenContainingFolder, menuEntryOpenInIntegratedTerminal, menuEntrySeparator, menuEntryCut, menuEntryCopy, menuEntryPaste, menuEntrySeparator, menuEntryCopyPath, menuEntryCopyRelativePath, menuEntrySeparator, menuEntryRename, menuEntryDelete];
 };
-const getMenuEntries = menuId => {
-  switch (menuId) {
+const getMenuEntries = (menuId, props) => {
+  switch (props.menuId) {
+    case MenuChatHeader:
+      return getMenuEntriesChatHeader();
+    case MenuChatInput:
+      return getMenuEntriesChatInput();
     case MenuChatList:
       return getMenuEntriesChatList();
+    case MenuChatProjectList:
+      return getMenuEntriesChatProjectList(props.projectId);
     default:
       return getMenuEntriesFile();
   }
@@ -3132,6 +3367,10 @@ const getSelectedSessionId = state => {
   return state.selectedSessionId;
 };
 
+const handleChatDetailWelcomeContextMenu = async state => {
+  return state;
+};
+
 const handleChatHeaderContextMenu = async state => {
   return state;
 };
@@ -3172,17 +3411,13 @@ const handleChatListContextMenu = async (state, eventX, eventY) => {
   if (!item) {
     return state;
   }
-  await showContextMenu2(uid, -1, eventX, eventY, {
-    menuId: -1,
+  await showContextMenu2(uid, MenuChatList, eventX, eventY, {
+    menuId: MenuChatList,
     sessionId: item.id
   });
   return state;
 };
 
-const handleChatWelcomeContextMenu = async state => {
-  return state;
-};
-
 const generateSessionId = () => {
   return crypto.randomUUID();
 };
@@ -7051,7 +7286,8 @@ const focusInput = state => {
   return {
     ...state,
     focus: 'composer',
-    focused: true
+    focused: true,
+    listFocusedIndex: -1
   };
 };
 
@@ -7776,76 +8012,6 @@ const handleClickSend = async state => {
   return handleSubmit(submitState);
 };
 
-const Composer = 'composer';
-const Search = 'search';
-const ComposerDropTarget = 'composer-drop-target';
-const AddContext = 'add-context';
-const Dictate = 'dictate';
-const Send = 'send';
-const Back = 'back';
-const Model = 'model';
-const ModelPickerToggle = 'model-picker-toggle';
-const ModelPickerSearch = 'model-picker-search';
-const ModelPickerSettings = 'model-picker-settings';
-const RunMode = 'runMode';
-const ToggleChatFocus = 'toggle-chat-focus';
-const ToggleSearch = 'toggle-search';
-const CreateProject = 'create-project';
-const CreateSession = 'create-session';
-const CreateSessionInProjectPrefix = 'create-session-in-project:';
-const SessionDebug = 'session-debug';
-const Settings = 'settings';
-const Login = 'login';
-const Logout = 'logout';
-const CloseChat = 'close-chat';
-const SessionDelete = 'SessionDelete';
-const ProjectPrefix = 'project:';
-const SessionPrefix = 'session:';
-const RenamePrefix = 'session-rename:';
-const ModelPickerItemPrefix = 'model-picker-item:';
-const getProjectInputName = projectId => {
-  return `${ProjectPrefix}${projectId}`;
-};
-const getCreateSessionInProjectInputName = projectId => {
-  return `${CreateSessionInProjectPrefix}${projectId}`;
-};
-const isCreateSessionInProjectInputName = name => {
-  return name.startsWith(CreateSessionInProjectPrefix);
-};
-const getProjectIdFromCreateSessionInProjectInputName = name => {
-  return name.slice(CreateSessionInProjectPrefix.length);
-};
-const isProjectInputName = name => {
-  return name.startsWith(ProjectPrefix);
-};
-const getProjectIdFromInputName = name => {
-  return name.slice(ProjectPrefix.length);
-};
-const getSessionInputName = sessionId => {
-  return `${SessionPrefix}${sessionId}`;
-};
-const isSessionInputName = name => {
-  return name.startsWith(SessionPrefix);
-};
-const getSessionIdFromInputName = name => {
-  return name.slice(SessionPrefix.length);
-};
-const isRenameInputName = name => {
-  return name.startsWith(RenamePrefix);
-};
-const getRenameIdFromInputName = name => {
-  return name.slice(RenamePrefix.length);
-};
-const getModelPickerItemInputName = modelId => {
-  return `${ModelPickerItemPrefix}${modelId}`;
-};
-const isModelPickerItemInputName = name => {
-  return name.startsWith(ModelPickerItemPrefix);
-};
-const getModelIdFromModelPickerItemInputName = name => {
-  return name.slice(ModelPickerItemPrefix.length);
-};
-
 const OpenApiApiKeyInput = 'open-api-api-key';
 const SaveOpenApiApiKey = 'save-openapi-api-key';
 const OpenOpenApiApiKeySettings = 'open-openapi-api-key-settings';
@@ -7954,11 +8120,34 @@ const selectListIndex = async (state, index) => {
     return state;
   }
   const session = visibleSessions[index];
-  return selectSession(state, session.id);
+  const nextState = await selectSession(state, session.id);
+  return {
+    ...nextState,
+    focus: 'list',
+    focused: true,
+    listFocusedIndex: index
+  };
 };
 
 const handleClickList = async (state, eventX, eventY) => {
   const index = getListIndex(state, eventX, eventY);
+  if (index === -1) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+  if (index >= visibleSessions.length) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
   return selectListIndex(state, index);
 };
 
@@ -8241,21 +8430,37 @@ const handleInputFocus = async (state, name) => {
     return {
       ...state,
       focus: 'send-button',
-      focused: true
+      focused: true,
+      listFocusedIndex: -1
+    };
+  }
+  if (name === ChatList$1) {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true,
+      listFocusedIndex: -1
     };
   }
   if (isSessionInputName(name) || name === SessionDelete) {
+    const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+    const sessionId = isSessionInputName(name) ? getSessionIdFromInputName(name) : '';
+    const focusedIndex = sessionId === '' ? -1 : visibleSessions.findIndex(session => {
+      return session.id === sessionId;
+    });
     return {
       ...state,
       focus: 'list',
-      focused: true
+      focused: true,
+      listFocusedIndex: focusedIndex
     };
   }
   if (name === CreateSession || name === SessionDebug || name === Settings || name === CloseChat || name === Back) {
     return {
       ...state,
       focus: 'header',
-      focused: true
+      focused: true,
+      listFocusedIndex: -1
     };
   }
   return {
@@ -8308,6 +8513,18 @@ const handleKeyDown = async (state, key, shiftKey) => {
     sessions,
     viewMode
   } = state;
+  if (state.focus === 'list' && viewMode === 'list') {
+    switch (key) {
+      case 'ArrowDown':
+        return chatListFocusNext(state);
+      case 'ArrowUp':
+        return chatListFocusPrevious(state);
+      case 'End':
+        return chatListFocusLast(state);
+      case 'Home':
+        return chatListFocusFirst(state);
+    }
+  }
   if (key !== 'Enter' || shiftKey) {
     return state;
   }
@@ -8356,7 +8573,50 @@ const handleNewline = async state => {
   return handleInput(state, Composer, `${composerValue}\n`);
 };
 
-const handleProjectListContextMenu = async state => {
+const getProjectRowIds = (projects, sessions, projectExpandedIds) => {
+  const blankProjectId = projects.find(project => project.name === '_blank')?.id || projects[0]?.id || '';
+  const projectRowIds = [];
+  for (const project of projects) {
+    projectRowIds.push(project.id);
+    if (!projectExpandedIds.includes(project.id)) {
+      continue;
+    }
+    for (const session of sessions) {
+      const sessionProjectId = session.projectId || blankProjectId;
+      if (sessionProjectId === project.id) {
+        projectRowIds.push(project.id);
+      }
+    }
+  }
+  return projectRowIds;
+};
+const getProjectIdAtPosition = (state, eventY) => {
+  const {
+    headerHeight,
+    listItemHeight,
+    projectExpandedIds,
+    projectListScrollTop,
+    projects,
+    sessions,
+    y
+  } = state;
+  const relativeY = eventY - y - headerHeight + projectListScrollTop;
+  if (relativeY < 0) {
+    return '';
+  }
+  const index = Math.floor(relativeY / listItemHeight);
+  const projectRowIds = getProjectRowIds(projects, sessions, projectExpandedIds);
+  return projectRowIds[index] || '';
+};
+const handleProjectListContextMenu = async (state, button, eventX, eventY) => {
+  const {
+    uid
+  } = state;
+  const projectId = getProjectIdAtPosition(state, eventY);
+  await showContextMenu2(uid, MenuChatProjectList, eventX, eventY, {
+    menuId: MenuChatProjectList,
+    projectId
+  });
   return state;
 };
 
@@ -9108,10 +9368,24 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
   align-items:center;
 }
 
+.ChatListItemFocused{
+  background: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
 .ChatMessageContent p + p{
   margin-top: 0.75em;
 }
 
+.MissingApiKeyForm{
+  padding-top: 10px;
+}
+
+.ChatHeaderLabel{
+  margin: 0;
+  font-size: 14px;
+}
+
 .ChatListItemStatusRow{
   width: 16px;
   min-width: 16px;
@@ -9134,6 +9408,8 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
 
 .ChatListItemStatusFinished{
   color: var(--vscode-testing-iconPassed);
+}
+
 .ChatListItem .SessionArchiveButton{
   opacity: 0;
 }
@@ -9142,6 +9418,13 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
 .ChatListItem:focus-within .SessionArchiveButton{
   opacity: 1;
 }
+
+.ChatHeaderLabel{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 `;
   return `${baseCss}
 
@@ -9176,7 +9459,11 @@ const renderCss = (oldState, newState) => {
   return [SetCss, uid, css];
 };
 
-const getFocusSelector = focus => {
+const getFocusSelector = state => {
+  const {
+    focus,
+    listFocusedIndex
+  } = state;
   switch (focus) {
     case 'composer':
     case 'input':
@@ -9184,7 +9471,17 @@ const getFocusSelector = focus => {
     case 'header':
       return '[name="create-session"]';
     case 'list':
-      return '[name^="session:"]';
+      {
+        if (listFocusedIndex === -1) {
+          return `[name="${ChatList$1}"]`;
+        }
+        const visibleSessions = getVisibleSessions(state.sessions, state.selectedProjectId);
+        const session = visibleSessions[listFocusedIndex];
+        if (!session) {
+          return `[name="${ChatList$1}"]`;
+        }
+        return `[name="${getSessionInputName(session.id)}"]`;
+      }
     case 'send-button':
       return '[name="send"]';
     default:
@@ -9192,7 +9489,7 @@ const getFocusSelector = focus => {
   }
 };
 const renderFocus = (oldState, newState) => {
-  const selector = getFocusSelector(newState.focus);
+  const selector = getFocusSelector(newState);
   return [FocusSelector, selector];
 };
 
@@ -9225,6 +9522,7 @@ const ChatTodoListItemInProgress = 'ChatTodoListItemInProgress';
 const ChatTodoListItemCompleted = 'ChatTodoListItemCompleted';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
+const ChatHeaderLabel = 'ChatHeaderLabel';
 const Button = 'Button';
 const ButtonPrimary = 'ButtonPrimary';
 const ButtonSecondary = 'ButtonSecondary';
@@ -9241,6 +9539,7 @@ const LabelDetail = 'LabelDetail';
 const ChatList = 'ChatList';
 const ChatListEmpty = 'ChatListEmpty';
 const ChatListItem = 'ChatListItem';
+const ChatListItemFocused = 'ChatListItemFocused';
 const ChatListItemStatusRow = 'ChatListItemStatusRow';
 const ChatListItemStatusIcon = 'ChatListItemStatusIcon';
 const ChatListItemStatusStopped = 'ChatListItemStatusStopped';
@@ -9267,6 +9566,7 @@ const MarkdownMathBlock = 'MarkdownMathBlock';
 const MarkdownTable = 'MarkdownTable';
 const ChatTableWrapper = 'ChatTableWrapper';
 const Message = 'Message';
+const MissingApiKeyForm = 'MissingApiKeyForm';
 const ChatMessageContent = 'ChatMessageContent';
 const ChatToolCalls = 'ChatToolCalls';
 const ChatToolCallsLabel = 'ChatToolCallsLabel';
@@ -9497,6 +9797,20 @@ const getAddContextButtonDom = () => {
     type: Text
   }];
 };
+const getBackToChatsButtonDom = () => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(Button, ButtonSecondary),
+    inputType: 'button',
+    name: Back,
+    onClick: HandleClickBack,
+    title: backToChatList(),
+    type: Button$1
+  }, {
+    text: backToChatList(),
+    type: Text
+  }];
+};
 
 const clampToPercentage = (tokensUsed, tokensMax) => {
   if (tokensMax <= 0) {
@@ -9533,9 +9847,9 @@ const getUsageOverviewDom = (tokensUsed, tokensMax) => {
   }, text(usageLabel)];
 };
 
-const getChatSendAreaDom = (composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled = false) => {
+const getChatSendAreaDom = (composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled = false, showBackToChatsButton = false) => {
   const isSendDisabled = composerValue.trim() === '';
-  const controlsCount = 2 + (usageOverviewEnabled ? 1 : 0) + (showRunMode ? 1 : 0) + (addContextButtonEnabled ? 1 : 0);
+  const controlsCount = 2 + (usageOverviewEnabled ? 1 : 0) + (showRunMode ? 1 : 0) + (addContextButtonEnabled ? 1 : 0) + (showBackToChatsButton ? 1 : 0);
   const hasTodoList = todoListToolEnabled && todoListItems.length > 0;
   const todoHeaderText = `Todos (${todoListItems.filter(item => item.status === 'completed').length}/${todoListItems.length})`;
   const getTodoItemClassName = status => {
@@ -9589,7 +9903,7 @@ const getChatSendAreaDom = (composerValue, modelPickerOpen, modelPickerSearchVal
     className: ChatSendAreaBottom,
     onContextMenu: HandleContextMenuChatSendAreaBottom,
     type: Div
-  }, ...(newChatModelPickerEnabled ? getChatModelPickerVirtualDom(models, selectedModelId, modelPickerOpen, modelPickerSearchValue) : getChatSelectVirtualDom(models, selectedModelId)), ...(showRunMode ? getRunModeSelectVirtualDom(runMode) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
+  }, ...(newChatModelPickerEnabled ? getChatModelPickerVirtualDom(models, selectedModelId, modelPickerOpen, modelPickerSearchValue) : getChatSelectVirtualDom(models, selectedModelId)), ...(showRunMode ? getRunModeSelectVirtualDom(runMode) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...(showBackToChatsButton ? getBackToChatsButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
 };
 
 const getImageAltText = alt => {
@@ -10001,6 +10315,7 @@ const getMissingApiKeyDom = ({
   inputPattern,
   inputRequired = false,
   openSettingsButtonName,
+  openSettingsUrl,
   placeholder,
   saveButtonDisabled = false,
   saveButtonName,
@@ -10008,10 +10323,14 @@ const getMissingApiKeyDom = ({
 }) => {
   return [{
     childCount: 2,
+    className: MissingApiKeyForm,
     method: 'GET',
     onSubmit: HandleMissingApiKeySubmit,
     type: Form
   }, {
+    autocapitalize: 'off',
+    autocomplete: 'off',
+    autocorrect: 'off',
     childCount: 0,
     className: InputBox,
     name: inputName,
@@ -10021,6 +10340,7 @@ const getMissingApiKeyDom = ({
     } : {}),
     placeholder,
     required: inputRequired,
+    spellcheck: false,
     type: Input
   }, {
     childCount: 2,
@@ -10036,10 +10356,11 @@ const getMissingApiKeyDom = ({
   }, text(saveButtonText), {
     childCount: 1,
     className: mergeClassNames(Button, ButtonSecondary),
-    inputType: 'button',
+    href: openSettingsUrl,
     name: openSettingsButtonName,
-    onClick: HandleClick,
-    type: Button$1
+    rel: 'noopener noreferrer',
+    target: '_blank',
+    type: A
   }, text(getApiKeyText)];
 };
 
@@ -10050,6 +10371,7 @@ const getMissingOpenApiApiKeyDom = () => {
     inputPattern: '^sk-.+',
     inputRequired: true,
     openSettingsButtonName: OpenOpenApiApiKeyWebsite,
+    openSettingsUrl: 'https://platform.openai.com/api-keys',
     placeholder: openApiApiKeyPlaceholder(),
     saveButtonName: SaveOpenApiApiKey
   });
@@ -10061,6 +10383,7 @@ const getMissingOpenRouterApiKeyDom = (openRouterApiKeyState = 'idle') => {
     getApiKeyText: getOpenRouterApiKey(),
     inputName: OpenRouterApiKeyInput,
     openSettingsButtonName: OpenOpenRouterApiKeySettings,
+    openSettingsUrl: 'https://openrouter.ai/settings/keys',
     placeholder: openRouterApiKeyPlaceholder(),
     saveButtonDisabled: isSaving,
     saveButtonName: SaveOpenRouterApiKey,
@@ -11066,7 +11389,7 @@ const getChatModeChatFocusVirtualDom = ({
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled), ...(isDropOverlayVisible ? [{
+  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled, true), ...(isDropOverlayVisible ? [{
     childCount: 1,
     className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
     name: ComposerDropTarget,
@@ -11180,8 +11503,8 @@ const getChatHeaderDomDetailMode = (selectedSessionTitle, authEnabled = false, a
     type: Div
   }, ...getBackButtonVirtualDom(), {
     childCount: 1,
-    className: Label,
-    type: Span
+    className: ChatHeaderLabel,
+    type: H2
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom('detail', authEnabled, authStatus), ...(hasAuthError ? [{
     childCount: 1,
     className: ChatAuthError,
@@ -11258,8 +11581,8 @@ const getChatHeaderListModeDom = (authEnabled = false, authStatus = 'signed-out'
     type: Div
   }, {
     childCount: 1,
-    className: Label,
-    type: Span
+    className: ChatHeaderLabel,
+    type: H2
   }, text(chats()), ...getChatHeaderActionsDom('list', authEnabled, authStatus, searchEnabled), ...(hasSearchField ? [{
     childCount: 1,
     className: SearchFieldContainer,
@@ -11303,8 +11626,8 @@ const getSessionStatusClassName = session => {
   }
   return ChatListItemStatusStopped;
 };
-const getSessionDom = session => {
-  const sessionClassName = ChatListItem;
+const getSessionDom = (session, focused = false) => {
+  const sessionClassName = focused ? mergeClassNames(ChatListItem, ChatListItemFocused) : ChatListItem;
   const sessionStatusClassName = getSessionStatusClassName(session);
   return [{
     childCount: 3,
@@ -11323,6 +11646,8 @@ const getSessionDom = session => {
     className: ChatListItemLabel,
     name: getSessionInputName(session.id),
     onContextMenu: HandleListContextMenu,
+    onFocus: HandleFocus,
+    tabIndex: 0,
     type: Div
   }, text(session.title), {
     childCount: 1,
@@ -11344,18 +11669,22 @@ const getSessionDom = session => {
   }];
 };
 
-const getChatListDom = (sessions, selectedSessionId, chatListScrollTop = 0) => {
+const getChatListDom = (sessions, selectedSessionId, listFocusedIndex, chatListScrollTop = 0) => {
   if (sessions.length === 0) {
     return getEmptyChatSessionsDom();
   }
   return [{
     childCount: sessions.length,
     className: ChatList,
+    name: ChatList$1,
     onClick: HandleClickList,
+    onContextMenu: HandleListContextMenu,
+    onFocus: HandleFocus,
     onScroll: HandleChatListScroll,
     scrollTop: chatListScrollTop,
+    tabIndex: 0,
     type: Ul
-  }, ...sessions.flatMap(getSessionDom)];
+  }, ...sessions.flatMap((session, index) => getSessionDom(session, index === listFocusedIndex))];
 };
 
 const getChatModeListVirtualDom = ({
@@ -11371,6 +11700,7 @@ const getChatModeListVirtualDom = ({
   composerHeight = 28,
   composerLineHeight = 20,
   composerValue,
+  listFocusedIndex = -1,
   modelPickerOpen = false,
   modelPickerSearchValue = '',
   models,
@@ -11399,7 +11729,7 @@ const getChatModeListVirtualDom = ({
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getChatHeaderListModeDom(authEnabled, authStatus, authErrorMessage, searchEnabled, searchFieldVisible, searchValue), ...getChatListDom(visibleSessions, selectedSessionId, chatListScrollTop), ...getChatSendAreaDom(composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled), ...(isDropOverlayVisible ? [{
+  }, ...getChatHeaderListModeDom(authEnabled, authStatus, authErrorMessage, searchEnabled, searchFieldVisible, searchValue), ...getChatListDom(visibleSessions, selectedSessionId, listFocusedIndex, chatListScrollTop), ...getChatSendAreaDom(composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled), ...(isDropOverlayVisible ? [{
     childCount: 1,
     className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
     name: ComposerDropTarget,
@@ -11506,6 +11836,7 @@ const getChatVirtualDom = options => {
     composerHeight,
     composerLineHeight,
     composerValue,
+    listFocusedIndex = -1,
     messagesScrollTop,
     modelPickerOpen = false,
     modelPickerSearchValue = '',
@@ -11626,6 +11957,7 @@ const getChatVirtualDom = options => {
         composerHeight,
         composerLineHeight,
         composerValue,
+        listFocusedIndex,
         modelPickerOpen,
         modelPickerSearchValue,
         models,
@@ -11665,6 +11997,7 @@ const renderItems = (oldState, newState) => {
     composerLineHeight,
     composerValue,
     initial,
+    listFocusedIndex,
     messagesScrollTop,
     modelPickerOpen,
     modelPickerSearchValue,
@@ -11711,6 +12044,7 @@ const renderItems = (oldState, newState) => {
     composerHeight,
     composerLineHeight,
     composerValue,
+    listFocusedIndex,
     messagesScrollTop,
     modelPickerOpen,
     modelPickerSearchValue,
@@ -11971,7 +12305,8 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleChatWelcomeContextMenu,
-    params: ['handleChatWelcomeContextMenu']
+    params: ['handleChatDetailWelcomeContextMenu'],
+    preventDefault: true
   }, {
     name: HandleChatHeaderContextMenu,
     params: ['handleChatHeaderContextMenu'],
@@ -12233,6 +12568,10 @@ const useMockApi = (state, value, mockApiCommandId = defaultMockApiCommandId) =>
 };
 
 const commandMap = {
+  'Chat.chatListFocusFirst': wrapCommand(chatListFocusFirst),
+  'Chat.chatListFocusLast': wrapCommand(chatListFocusLast),
+  'Chat.chatListFocusNext': wrapCommand(chatListFocusNext),
+  'Chat.chatListFocusPrevious': wrapCommand(chatListFocusPrevious),
   'Chat.clearInput': wrapCommand(clearInput),
   'Chat.copyInput': wrapCommand(copyInput),
   'Chat.create': create,
@@ -12247,11 +12586,11 @@ const commandMap = {
   'Chat.getMenuEntryIds': getMenuEntryIds,
   'Chat.getQuickPickMenuEntries': getQuickPickMenuEntries,
   'Chat.getSelectedSessionId': wrapGetter(getSelectedSessionId),
+  'Chat.handleChatDetailWelcomeContextMenu': wrapCommand(handleChatDetailWelcomeContextMenu),
   'Chat.handleChatHeaderContextMenu': wrapCommand(handleChatHeaderContextMenu),
   'Chat.handleChatInputContextMenu': wrapCommand(handleChatInputContextMenu),
   'Chat.handleChatListContextMenu': wrapCommand(handleChatListContextMenu),
   'Chat.handleChatListScroll': wrapCommand(handleChatListScroll),
-  'Chat.handleChatWelcomeContextMenu': wrapCommand(handleChatWelcomeContextMenu),
   'Chat.handleClick': wrapCommand(handleClick),
   'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,

package/package.json

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