@lvce-editor/chat-view 6.23.0 → 6.25.0

package/dist/chatViewWorkerMain.js

@@ -8486,11 +8486,11 @@ const handleMessagesContextMenu = async (state, button, x, y) => {
   return state;
 };
 
-const handleMissingApiKeySubmit = async (state, submitterName = '') => {
-  if (!submitterName) {
-    return state;
-  }
-  return handleClick(state, submitterName);
+const handleMissingOpenAiApiKeyFormSubmit = async state => {
+  return handleClickSaveOpenApiApiKey(state);
+};
+const handleMissingOpenRouterApiKeyFormSubmit = async state => {
+  return handleClickSaveOpenRouterApiKey(state);
 };
 
 const handleModelChange = async (state, value) => {
@@ -9268,6 +9268,14 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   };
 };
 
+const openModelPicker = state => {
+  return {
+    ...state,
+    modelPickerOpen: !state.modelPickerOpen,
+    modelPickerSearchValue: state.modelPickerOpen ? '' : state.modelPickerSearchValue
+  };
+};
+
 const pasteInput = async state => {
   const text = await readText();
   return handleInput(state, Composer, text, 'script');
@@ -9308,12 +9316,35 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
   height: ${buttonsHeight}px;
 }
 
+.ChatInputBox{
+  width: 100%;
+  margin: 0;
+  border: none;
+  outline: none;
+  flex: 1;
+  background: var(--InputBoxBackground);
+  padding: 4px 6px;
+  color: var(--InputBoxForeground);
+  font-size: 13px;
+  height: 24px;
+  contain: strict;
+  resize: none;
+  overflow: hidden;
+  white-space: pre;
+  text-overflow: ellipsis;
+}
 .ChatSendArea:focus-within{
   border-color: darkcyan;
 }
 
+.SendButtonDisabled{
+  background: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-disabledForeground);
+  cursor: default;
+}
+
 .ChatModelPicker{
-  border: 1px solid white;
+  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
 }
 
 .ChatListItem{
@@ -9384,6 +9415,63 @@ a.Button{
   text-overflow: ellipsis;
 }
 
+.ChatModelPickerList{
+  margin:0;
+  scrollbar-width: thin;
+  scrollbar-color: var(--vscode-scrollbarSlider-hoverBackground) var(--vscode-editorWidget-background, var(--vscode-editor-background));
+}
+
+.ChatModelPickerList::-webkit-scrollbar{
+  width: 10px;
+}
+
+.ChatModelPickerList::-webkit-scrollbar-track{
+  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
+}
+
+.ChatModelPickerList::-webkit-scrollbar-thumb{
+  background: var(--vscode-scrollbarSlider-hoverBackground);
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background-clip: content-box;
+}
+
+.ChatModelPickerList::-webkit-scrollbar-thumb:hover{
+  background: var(--vscode-scrollbarSlider-hoverBackground);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.ChatModelPickerList::-webkit-scrollbar-thumb:active{
+  background: var(--vscode-scrollbarSlider-activeBackground);
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.ChatModelPickerItem{
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ChatModelPickerContainer{
+  position: absolute;
+  inset:0;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.ChatModelPicker {
+  position: static;
+  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
+  margin-top: auto;
+  margin-bottom: 90px;
+  pointer-events: auto;
+}
+
 `;
   return `${baseCss}
 
@@ -9553,7 +9641,8 @@ const ChatUnorderedList = 'ChatUnorderedList';
 const ChatUnorderedListItem = 'ChatUnorderedListItem';
 const MessageUser = 'MessageUser';
 const MessageAssistant = 'MessageAssistant';
-const MultilineInputBox = 'MultilineInputBox';
+const ChatInputBox = 'ChatInputBox';
+const MultiLineInputBox = 'MultilineInputBox';
 const Option = 'Option';
 const TokenUsageOverview = 'TokenUsageOverview';
 const TokenUsageRing = 'TokenUsageRing';
@@ -9599,7 +9688,7 @@ const HandleDragEnterChatView = 30;
 const HandleDragOverChatView = 31;
 const HandleProjectListScroll = 32;
 const HandleClickDictationButton = 34;
-const HandleMissingApiKeySubmit = 35;
+const HandleMissingOpenAiApiKeyFormSubmit = 35;
 const HandleRunModeChange = 36;
 const HandleSearchInput = 37;
 const HandleChatWelcomeContextMenu = 39;
@@ -9608,6 +9697,7 @@ const HandleChatInputContextMenu = 41;
 const HandleContextMenuChatSendAreaBottom = 42;
 const HandleProjectAddButtonContextMenu = 43;
 const HandleProjectListContextMenu = 44;
+const HandleMissingOpenRouterApiKeyFormSubmit = 45;
 
 const getModelLabel = model => {
   if (model.provider === 'openRouter') {
@@ -9619,13 +9709,11 @@ const getModelLabel = model => {
   return model.name;
 };
 
-const getChatModelPickerVirtualDom = (models, selectedModelId, modelPickerOpen, modelPickerSearchValue) => {
+const getChatModelPickerToggleVirtualDom = (models, selectedModelId, modelPickerOpen) => {
   const selectedModel = models.find(model => model.id === selectedModelId);
   const selectedModelLabel = selectedModel ? selectedModel.name : selectedModelId;
-  const normalizedSearch = modelPickerSearchValue.trim().toLowerCase();
-  const visibleModels = normalizedSearch ? models.filter(model => getModelLabel(model).toLowerCase().includes(normalizedSearch)) : models;
   return [{
-    childCount: modelPickerOpen ? 2 : 1,
+    childCount: 1,
     className: ChatModelPickerContainer,
     type: Div
   }, {
@@ -9636,10 +9724,24 @@ const getChatModelPickerVirtualDom = (models, selectedModelId, modelPickerOpen,
     title: selectedModelLabel,
     type: Button$1
   }, {
+    childCount: 1,
+    type: Span
+  }, text(selectedModelLabel), {
     childCount: 0,
-    className: 'MaskIcon MaskIconChevronUp',
+    className: modelPickerOpen ? 'MaskIcon MaskIconChevronUp' : 'MaskIcon MaskIconChevronDown',
+    role: 'none',
+    type: Div
+  }];
+};
+const getChatModelPickerPopOverVirtualDom = (models, selectedModelId, modelPickerSearchValue) => {
+  const normalizedSearch = modelPickerSearchValue.trim().toLowerCase();
+  const visibleModels = normalizedSearch ? models.filter(model => getModelLabel(model).toLowerCase().includes(normalizedSearch)) : models;
+  return [{
+    childCount: 2,
+    className: ChatModelPickerContainer,
+    style: 'position:absolute;',
     type: Div
-  }, text(selectedModelLabel), ...(modelPickerOpen ? [{
+  }, {
     childCount: 3 + visibleModels.length,
     className: ChatModelPicker,
     type: Div
@@ -9677,7 +9779,7 @@ const getChatModelPickerVirtualDom = (models, selectedModelId, modelPickerOpen,
     name: getModelPickerItemInputName(model.id),
     onClick: HandleClick,
     type: Li
-  }, text(getModelLabel(model))])] : [])];
+  }, text(getModelLabel(model))])];
 };
 
 const getModelOptionDOm = (model, selectedModelId) => {
@@ -9783,6 +9885,16 @@ const getBackToChatsButtonDom = () => {
   }];
 };
 
+const getTodoItemClassName = status => {
+  if (status === 'completed') {
+    return `${ChatTodoListItem} ${ChatTodoListItemCompleted} completed`;
+  }
+  if (status === 'inProgress') {
+    return `${ChatTodoListItem} ${ChatTodoListItemInProgress} inProgress`;
+  }
+  return `${ChatTodoListItem} ${ChatTodoListItemTodo} todo`;
+};
+
 const clampToPercentage = (tokensUsed, tokensMax) => {
   if (tokensMax <= 0) {
     return 0;
@@ -9818,15 +9930,6 @@ const getUsageOverviewDom = (tokensUsed, tokensMax) => {
   }, text(usageLabel)];
 };
 
-const getTodoItemClassName = status => {
-  if (status === 'completed') {
-    return `${ChatTodoListItem} ${ChatTodoListItemCompleted} completed`;
-  }
-  if (status === 'inProgress') {
-    return `${ChatTodoListItem} ${ChatTodoListItemInProgress} inProgress`;
-  }
-  return `${ChatTodoListItem} ${ChatTodoListItemTodo} todo`;
-};
 const getChatSendAreaDom = (composerValue, modelPickerOpen, modelPickerSearchValue, models, newChatModelPickerEnabled, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, todoListToolEnabled, todoListItems, voiceDictationEnabled = false) => {
   const isSendDisabled = composerValue.trim() === '';
   const controlsCount = 2 + (usageOverviewEnabled ? 1 : 0) + (showRunMode ? 1 : 0) + (addContextButtonEnabled ? 1 : 0);
@@ -9861,7 +9964,7 @@ const getChatSendAreaDom = (composerValue, modelPickerOpen, modelPickerSearchVal
     type: Li
   }, text(item.text)])] : []), {
     childCount: 0,
-    className: MultilineInputBox,
+    className: mergeClassNames(MultiLineInputBox, ChatInputBox),
     name: Composer,
     onContextMenu: HandleChatInputContextMenu,
     onFocus: HandleFocus,
@@ -9874,7 +9977,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 ? getChatModelPickerToggleVirtualDom(models, selectedModelId, modelPickerOpen) : getChatSelectVirtualDom(models, selectedModelId)), ...(showRunMode ? getRunModeSelectVirtualDom(runMode) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
 };
 
 const getBoldInlineNodeDom = (inlineNode, useChatMathWorker, renderInlineNodeDom) => {
@@ -10345,6 +10448,7 @@ const getMissingApiKeyDom = ({
   inputName,
   inputPattern,
   inputRequired = false,
+  onSubmit,
   openSettingsButtonName,
   openSettingsUrl,
   placeholder,
@@ -10356,7 +10460,7 @@ const getMissingApiKeyDom = ({
     childCount: 2,
     className: MissingApiKeyForm,
     method: 'GET',
-    onSubmit: HandleMissingApiKeySubmit,
+    onSubmit,
     type: Form
   }, {
     autocapitalize: 'off',
@@ -10389,6 +10493,7 @@ const getMissingOpenApiApiKeyDom = () => {
     inputName: OpenApiApiKeyInput,
     inputPattern: '^sk-.+',
     inputRequired: true,
+    onSubmit: HandleMissingOpenAiApiKeyFormSubmit,
     openSettingsButtonName: OpenOpenApiApiKeyWebsite,
     openSettingsUrl: 'https://platform.openai.com/api-keys',
     placeholder: openApiApiKeyPlaceholder(),
@@ -10401,6 +10506,7 @@ const getMissingOpenRouterApiKeyDom = (openRouterApiKeyState = 'idle') => {
   return getMissingApiKeyDom({
     getApiKeyText: getOpenRouterApiKey(),
     inputName: OpenRouterApiKeyInput,
+    onSubmit: HandleMissingOpenRouterApiKeyFormSubmit,
     openSettingsButtonName: OpenOpenRouterApiKeySettings,
     openSettingsUrl: 'https://openrouter.ai/settings/keys',
     placeholder: openRouterApiKeyPlaceholder(),
@@ -11404,8 +11510,10 @@ const getChatModeChatFocusVirtualDom = ({
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const messages = selectedSession ? selectedSession.messages : [];
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
+  const isNewModelPickerVisible = newChatModelPickerEnabled && modelPickerOpen;
+  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0);
   return [{
-    childCount: isDropOverlayVisible ? 4 : 3,
+    childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat, 'ChatFocus'),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
@@ -11421,7 +11529,7 @@ const getChatModeChatFocusVirtualDom = ({
   }, {
     text: attachImageAsContext(),
     type: Text
-  }] : [])];
+  }] : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(models, selectedModelId, modelPickerSearchValue) : [])];
 };
 
 const getBackButtonVirtualDom = () => {
@@ -11571,8 +11679,10 @@ const getChatModeDetailVirtualDom = ({
   const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
+  const isNewModelPickerVisible = newChatModelPickerEnabled && modelPickerOpen;
+  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0);
   return [{
-    childCount: isDropOverlayVisible ? 4 : 3,
+    childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
@@ -11588,7 +11698,7 @@ const getChatModeDetailVirtualDom = ({
   }, {
     text: attachImageAsContext(),
     type: Text
-  }] : [])];
+  }] : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(models, selectedModelId, modelPickerSearchValue) : [])];
 };
 
 const getChatHeaderListModeDom = (authEnabled = false, authStatus = 'signed-out', authErrorMessage = '', searchEnabled = false, searchFieldVisible = false, searchValue = '') => {
@@ -11742,10 +11852,12 @@ const getChatModeListVirtualDom = ({
   voiceDictationEnabled = false
 }) => {
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
+  const isNewModelPickerVisible = newChatModelPickerEnabled && modelPickerOpen;
+  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0);
   const searchValueTrimmed = searchValue.trim().toLowerCase();
   const visibleSessions = searchEnabled && searchValueTrimmed ? sessions.filter(session => session.title.toLowerCase().includes(searchValueTrimmed)) : sessions;
   return [{
-    childCount: isDropOverlayVisible ? 4 : 3,
+    childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
@@ -11761,7 +11873,7 @@ const getChatModeListVirtualDom = ({
   }, {
     text: attachImageAsContext(),
     type: Text
-  }] : [])];
+  }] : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(models, selectedModelId, modelPickerSearchValue) : [])];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -12355,8 +12467,12 @@ const renderEventListeners = () => {
     params: ['handleSubmit'],
     preventDefault: true
   }, {
-    name: HandleMissingApiKeySubmit,
-    params: ['handleMissingApiKeySubmit', 'event.submitter?.name || ""'],
+    name: HandleMissingOpenAiApiKeyFormSubmit,
+    params: ['handleMissingOpenAiApiKeyFormSubmit'],
+    preventDefault: true
+  }, {
+    name: HandleMissingOpenRouterApiKeyFormSubmit,
+    params: ['handleMissingOpenRouterApiKeyFormSubmit'],
     preventDefault: true
   }];
 };
@@ -12644,7 +12760,8 @@ const commandMap = {
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
   'Chat.handleMessagesContextMenu': wrapCommand(handleMessagesContextMenu),
   'Chat.handleMessagesScroll': wrapCommand(handleMessagesScroll),
-  'Chat.handleMissingApiKeySubmit': wrapCommand(handleMissingApiKeySubmit),
+  'Chat.handleMissingOpenAiApiKeyFormSubmit': wrapCommand(handleMissingOpenAiApiKeyFormSubmit),
+  'Chat.handleMissingOpenRouterApiKeyFormSubmit': wrapCommand(handleMissingOpenRouterApiKeyFormSubmit),
   'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleProjectAddButtonContextMenu': wrapCommand(handleProjectAddButtonContextMenu),
   'Chat.handleProjectListContextMenu': wrapCommand(handleProjectListContextMenu),
@@ -12664,6 +12781,7 @@ const commandMap = {
   'Chat.mockOpenApiStreamPushChunk': wrapCommand(mockOpenApiStreamPushChunk),
   'Chat.mockOpenApiStreamReset': wrapCommand(mockOpenApiStreamReset),
   'Chat.openMockSession': wrapCommand(openMockSession),
+  'Chat.openModelPicker': wrapCommand(openModelPicker),
   'Chat.pasteInput': wrapCommand(pasteInput),
   'Chat.registerMockResponse': wrapCommand(registerMockResponse),
   'Chat.render2': render2,

package/package.json

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