@lvce-editor/chat-view 7.2.0 → 7.4.0

package/dist/chatViewWorkerMain.js

@@ -1485,10 +1485,6 @@ const terminate = () => {
   globalThis.close();
 };
 
-const getComposerWidth = width => {
-  return Math.max(1, width - 32);
-};
-
 const composerAttachmentGap = 8;
 const composerAttachmentMarginBottom = 8;
 const composerAttachmentFontSize = 12;
@@ -1497,6 +1493,18 @@ const composerAttachmentBorderWidth = 2;
 const composerAttachmentHeight = 26;
 const averageCharacterWidth = composerAttachmentFontSize * 0.6;
 const fallbackComposerWidth = 480;
+
+const getComposerWidth = width => {
+  return Math.max(1, width - 32);
+};
+
+const getAttachmentContainerWidth = width => {
+  if (width <= 0) {
+    return fallbackComposerWidth;
+  }
+  return Math.max(1, getComposerWidth(width));
+};
+
 const getComposerAttachmentLabel$1 = displayType => {
   switch (displayType) {
     case 'file':
@@ -1511,17 +1519,13 @@ const getComposerAttachmentLabel$1 = displayType => {
       return displayType;
   }
 };
-const getAttachmentContainerWidth = width => {
-  if (width <= 0) {
-    return fallbackComposerWidth;
-  }
-  return Math.max(1, getComposerWidth(width));
-};
+
 const getComposerAttachmentWidth = (attachment, containerWidth) => {
   const label = `${getComposerAttachmentLabel$1(attachment.displayType)} · ${attachment.name}`;
   const estimatedWidth = Math.ceil(label.length * averageCharacterWidth) + composerAttachmentHorizontalPadding + composerAttachmentBorderWidth;
   return Math.min(containerWidth, estimatedWidth);
 };
+
 const getComposerAttachmentsHeight = (composerAttachments, width) => {
   if (composerAttachments.length === 0) {
     return 0;
@@ -2595,14 +2599,21 @@ const getChatViewEvents = async sessionId => {
   return getEvents(sessionId);
 };
 
-const textFileRegex = /\.txt$/i;
-const pngSignature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
 const isImageFile = mimeType => {
   return mimeType.startsWith('image/');
 };
+
+const textFileRegex = /\.txt$/i;
 const isTextFile = (name, mimeType) => {
   return mimeType === 'text/plain' || textFileRegex.test(name);
 };
+
+const isValidJpeg = async blob => {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  return bytes.length >= 4 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes.at(-2) === 0xff && bytes.at(-1) === 0xd9;
+};
+
+const pngSignature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
 const isValidPng = async blob => {
   const header = new Uint8Array(await blob.slice(0, pngSignature.length).arrayBuffer());
   if (header.length !== pngSignature.length) {
@@ -2610,10 +2621,7 @@ const isValidPng = async blob => {
   }
   return pngSignature.every((value, index) => header[index] === value);
 };
-const isValidJpeg = async blob => {
-  const bytes = new Uint8Array(await blob.arrayBuffer());
-  return bytes.length >= 4 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes.at(-2) === 0xff && bytes.at(-1) === 0xd9;
-};
+
 const isValidImage = async (blob, mimeType) => {
   if (mimeType.startsWith('image/') && mimeType !== 'image/png' && mimeType !== 'image/jpeg') {
     return true;
@@ -2635,6 +2643,7 @@ const isValidImage = async (blob, mimeType) => {
     return false;
   }
 };
+
 const getComposerAttachmentDisplayType = async (blob, name, mimeType) => {
   if (isImageFile(mimeType)) {
     return (await isValidImage(blob, mimeType)) ? 'image' : 'invalid-image';
@@ -2694,8 +2703,7 @@ const getComposerAttachments = async sessionId => {
       continue;
     }
     const displayType = await getComposerAttachmentDisplayType(event.blob, event.name, event.mimeType);
-    const previewSrc = await getComposerAttachmentPreviewSrc(event.blob, displayType, event.mimeType);
-    const textContent = await getComposerAttachmentTextContent(event.blob, displayType);
+    const [previewSrc, textContent] = await Promise.all([getComposerAttachmentPreviewSrc(event.blob, displayType, event.mimeType), getComposerAttachmentTextContent(event.blob, displayType)]);
     attachments.set(event.attachmentId, {
       attachmentId: event.attachmentId,
       displayType,
@@ -8800,6 +8808,18 @@ const handleClickClose = async () => {
   await invoke('Layout.hideSecondarySideBar');
 };
 
+const handleClickCustomSelectOverlay = async (state, defaultPrevented) => {
+  if (defaultPrevented) {
+    return state;
+  }
+  return closeGitBranchPicker({
+    ...state,
+    agentModePickerOpen: false,
+    reasoningEffortPickerOpen: false,
+    runModePickerOpen: false
+  });
+};
+
 const handleClickDelete = async (state, sessionId = '') => {
   return deleteSession(state, sessionId);
 };
@@ -9083,8 +9103,7 @@ const handleDropFiles = async (state, name, fileHandles = []) => {
     const file = await droppedFileHandle.getFile();
     const attachmentId = `attachment-${nextAttachmentId + nextAttachments.length}`;
     const displayType = await getComposerAttachmentDisplayType(file, file.name, file.type);
-    const previewSrc = await getComposerAttachmentPreviewSrc(file, displayType, file.type);
-    const textContent = await getComposerAttachmentTextContent(file, displayType);
+    const [previewSrc, textContent] = await Promise.all([getComposerAttachmentPreviewSrc(file, displayType, file.type), getComposerAttachmentTextContent(file, displayType)]);
     await appendChatViewEvent({
       attachmentId,
       blob: file,
@@ -9152,11 +9171,13 @@ const handleInput = async (state, name, value, inputSource = 'user') => {
   }
   if (name === ModelPickerSearch) {
     const visibleModels = getVisibleModels(state.models, value);
+    const selectedModelId = visibleModels.some(model => model.id === state.selectedModelId) ? state.selectedModelId : visibleModels[0]?.id || state.selectedModelId;
     return {
       ...state,
       modelPickerHeight: getModelPickerHeight(state.modelPickerHeaderHeight, visibleModels.length),
       modelPickerListScrollTop: 0,
       modelPickerSearchValue: value,
+      selectedModelId,
       visibleModels
     };
   }
@@ -10324,6 +10345,7 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   const buttonsHeight = 20;
   const gap = 10;
   const contentPadding = 10;
+  const runModePickerHeight = 84;
   const chatSendAreaHeight = composerHeight + composerAttachmentsHeight + chatSendAreaPaddingTop + chatSendAreaPaddingBottom + buttonsHeight + gap + contentPadding * 2;
   const baseCss = `:root {
   --ChatInputBoxHeight: ${composerHeight}px;
@@ -10344,6 +10366,11 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   --ChatMessageLineHeight: ${chatMessageLineHeight}px;
   --ChatMessageFontFamily: ${chatMessageFontFamily};
   --ChatFocusContentMaxWidth: ${chatFocusContentMaxWidth}px;
+  --RunModePickerHeight: ${runModePickerHeight}px;
+}
+
+:root{
+ --WidgetBorder: white;
 }
 
 .ChatSendAreaBottom{
@@ -10369,7 +10396,7 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   min-width: 0;
   overflow: hidden;
   border-radius: 999px;
-  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border: 1px solid var(--WidgetBorder, white);
   padding: 4px 10px;
   background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
   color: var(--vscode-badge-foreground, var(--vscode-foreground));
@@ -10419,7 +10446,7 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
 }
 
 .ChatComposerAttachmentTextFile{
-  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
+  border-color: var(--vscode-charts-green, var(--WidgetBorder, white));
 }
 
 .ChatAttachments{
@@ -10437,7 +10464,7 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   min-width: 0;
   overflow: hidden;
   border-radius: 999px;
-  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border: 1px solid var(--WidgetBorder, white);
   padding: 4px 10px;
   background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
   color: var(--vscode-badge-foreground, var(--vscode-foreground));
@@ -10469,12 +10496,12 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
 }
 
 .ChatAttachmentTextFile{
-  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
+  border-color: var(--vscode-charts-green, var(--WidgetBorder, white));
 }
 
 .ChatImageMessageContent{
   padding: 6px;
-  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border: 1px solid var(--WidgetBorder, white);
   border-radius: 12px;
   background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
   overflow: hidden;
@@ -10505,7 +10532,7 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border: 1px solid var(--WidgetBorder, white);
   border-radius: 12px;
   background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
   box-shadow: 0 12px 28px color-mix(in srgb, var(--vscode-editor-background) 45%, black);
@@ -10564,8 +10591,9 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
 }
 
 .RunModePickerPopOver{
+  height: var(--RunModePickerHeight);
   overflow: hidden;
-  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border: 1px solid var(--WidgetBorder, white);
   border-radius: 8px;
   background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
   box-shadow: 0 8px 24px color-mix(in srgb, var(--vscode-editor-background) 50%, black);
@@ -10668,6 +10696,80 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   display: flex;
   contain: content;
 }
+
+
+.ChatSelect:hover{
+  background: var(--vscode-toolbar-hoverBackground, color-mix(in srgb, var(--vscode-editor-background) 80%, white));
+  color: var(--vscode-foreground);
+}
+
+.SelectLabel {
+  width: auto;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+.ChatSelect {
+display: flex;
+    gap: 4px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--vscode-descriptionForeground, var(--vscode-disabledForeground));
+    padding: 0 !important;
+}
+
+
+
+
+
+
+
+
+
+.SelectLabel {
+      width: auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+}
+
+
+.ChatSelect .MaskIcon {
+
+    width: 10px;
+    height: 10px;
+    pointer-events: none;
+}
+
+
+.ChatModelPickerList {
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  contain: strict;
+
+}
+
+
+.ChatModelPickerItem  {
+  contain: strict;
+  flex-shrink:0; /* TODO why?? */
+}
+
+
+.ChatModelPickerHeader {
+  height: 40px;
+  contain: strict;
+
+}
+
+
 `;
   return `${baseCss}
 
@@ -10968,6 +11070,7 @@ const HandleClickAgentModePickerToggle = 57;
 const HandleContextMenuChatImageAttachment = 58;
 const HandleClickGitBranchPickerToggle = 59;
 const HandleErrorComposerAttachmentPreviewOverlay = 60;
+const HandleClickCustomSelectOverlay = 61;
 
 const getAddContextButtonDom = () => {
   return [{
@@ -10982,7 +11085,7 @@ const getAddContextButtonDom = () => {
   }];
 };
 
-const getCustomSelectToggleVirtualDom = (label, name, open, onClick, title = label, ariaLabel = title) => {
+const getCustomSelectToggleVirtualDom = (label, name, open, onClick, title = label, ariaLabel = title, ariaControls = '') => {
   const getChevronDom = expanded => {
     return {
       childCount: 0,
@@ -10993,6 +11096,9 @@ const getCustomSelectToggleVirtualDom = (label, name, open, onClick, title = lab
     };
   };
   return [{
+    ...(ariaControls ? {
+      'aria-controls': ariaControls
+    } : {}),
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'true',
     'aria-label': ariaLabel,
@@ -11013,8 +11119,8 @@ const getCustomSelectToggleVirtualDom = (label, name, open, onClick, title = lab
   }, text(label), getChevronDom(open)];
 };
 
-const getCustomSelectPickerToggleVirtualDom = (label, name, open, onClick, title = label, ariaLabel = title) => {
-  return getCustomSelectToggleVirtualDom(label, name, open, onClick, title, ariaLabel);
+const getCustomSelectPickerToggleVirtualDom = (label, name, open, onClick, title = label, ariaLabel = title, ariaControls = '') => {
+  return getCustomSelectToggleVirtualDom(label, name, open, onClick, title, ariaLabel, ariaControls);
 };
 
 const getAgentModePickerVirtualDom = (selectedAgentMode, agentModePickerOpen) => {
@@ -11025,7 +11131,7 @@ const getChatModelPickerToggleVirtualDom = (models, selectedModelId, modelPicker
   const selectedModel = models.find(model => model.id === selectedModelId);
   const selectedModelLabel = selectedModel ? selectedModel.name : selectedModelId;
   const pickModelLabel = pickModel(selectedModelLabel);
-  return getCustomSelectPickerToggleVirtualDom(selectedModelLabel, ModelPickerToggle, modelPickerOpen, HandleClickModelPickerToggle, pickModelLabel, pickModelLabel);
+  return getCustomSelectPickerToggleVirtualDom(selectedModelLabel, ModelPickerToggle, modelPickerOpen, HandleClickModelPickerToggle, pickModelLabel, pickModelLabel, ModelPickerList);
 };
 
 const getCreatePullRequestButtonDom = () => {
@@ -11107,6 +11213,11 @@ const getGitBranchPickerVirtualDom = (gitBranches, gitBranchPickerOpen, gitBranc
   const showMessage = messageDom.length > 0;
   const popOverHeight = gitBranches.length * itemHeight + (showMessage ? messageHeight : 0);
   return [...getCustomSelectPickerToggleVirtualDom(label, GitBranchPickerToggle, gitBranchPickerOpen, HandleClickGitBranchPickerToggle, 'Switch branch', 'Switch branch'), ...(gitBranchPickerOpen ? [{
+    childCount: 1,
+    className: ChatModelPickerContainer,
+    onClick: HandleClickCustomSelectOverlay,
+    type: Div
+  }, {
     childCount: (showMessage ? 1 : 0) + 1,
     className: mergeClassNames(ChatModelPicker, CustomSelectPopOver, ChatGitBranchPicker),
     style: `height: ${popOverHeight}px;`,
@@ -11128,6 +11239,11 @@ const getReasoningEffortOptionsVirtualDom = selectedReasoningEffort => {
 };
 const getReasoningEffortPickerVirtualDom = (selectedReasoningEffort, reasoningEffortPickerOpen) => {
   return [...getCustomSelectPickerToggleVirtualDom(getReasoningEffortLabel(selectedReasoningEffort), ReasoningEffortPickerToggle, reasoningEffortPickerOpen, HandleClickReasoningEffortPickerToggle, 'Reasoning', 'Reasoning'), ...(reasoningEffortPickerOpen ? [{
+    childCount: 1,
+    className: ChatModelPickerContainer,
+    onClick: HandleClickCustomSelectOverlay,
+    type: Div
+  }, {
     childCount: 1,
     className: mergeClassNames(ChatModelPicker, CustomSelectPopOver),
     style: `height: ${reasoningEffortPickerHeight}px;`,
@@ -11509,16 +11625,21 @@ const getAgentModeOptionsVirtualDom = selectedAgentMode => {
   return agentModes.flatMap(agentMode => getCustomSelectOptionVirtualDom(getAgentModePickerItemInputName(agentMode), getAgentModeLabel(agentMode), agentMode === selectedAgentMode));
 };
 
-const getCustomSelectPopOverVirtualDom = (optionCount, height, optionNodes, containerClassName = '', popOverClassName = '') => {
+const getCustomSelectPopOverVirtualDom = (optionCount, height, optionNodes, containerClassName = '', popOverClassName = '', useInlineHeight = true) => {
   return [{
     childCount: 1,
     className: mergeClassNames(ChatModelPickerContainer, containerClassName),
+    onClick: HandleClickCustomSelectOverlay,
     type: Div
-  }, {
+  }, useInlineHeight ? {
     childCount: 1,
     className: mergeClassNames(ChatModelPicker, popOverClassName),
     style: `height: ${height}px;`,
     type: Div
+  } : {
+    childCount: 1,
+    className: mergeClassNames(ChatModelPicker, popOverClassName),
+    type: Div
   }, {
     childCount: optionCount,
     className: ChatModelPickerList,
@@ -11537,24 +11658,34 @@ const getUsageCostLabel = model => {
   return `${model.usageCost ?? 1}x`;
 };
 
+const getUsageCostDom = detail => {
+  if (detail === '') {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: ChatModelPickerItemUsageCost,
+    type: Span
+  }, text(detail)];
+};
 const getChatModelListItemVirtualDom = (model, selectedModelId) => {
   const detail = getUsageCostLabel(model);
   const hasDetail = detail !== '';
-  const className = mergeClassNames(ChatModelPickerItem, model.id === selectedModelId ? ChatModelPickerItemSelected : '');
+  const usageCostDom = getUsageCostDom(detail);
+  const selected = model.id === selectedModelId;
+  const className = mergeClassNames(ChatModelPickerItem, selected ? ChatModelPickerItemSelected : '');
   return [{
+    'aria-selected': selected ? 'true' : 'false',
     childCount: hasDetail ? 2 : 1,
     className,
     'data-id': model.id,
+    role: 'option',
     type: Li
   }, {
     childCount: 1,
     className: ChatModelPickerItemLabel,
     type: Span
-  }, text(getModelLabel(model)), ...(hasDetail ? [{
-    childCount: 1,
-    className: ChatModelPickerItemUsageCost,
-    type: Span
-  }, text(detail)] : [])];
+  }, text(getModelLabel(model)), ...usageCostDom];
 };
 
 const parentNode$2 = {
@@ -11573,10 +11704,12 @@ const getChatModelListVirtualDom = (visibleModels, selectedModelId) => {
   return [{
     childCount: visibleModels.length,
     className: ChatModelPickerList,
+    id: ModelPickerList,
     onClick: HandleClickModelPickerList,
     onPointerDown: HandlePointerDownModelPickerList,
     onPointerUp: HandlePointerUpModelPickerList,
     onScroll: HandleModelPickerListScroll,
+    role: 'listbox',
     type: Ul
   }, ...visibleModels.flatMap(model => getChatModelListItemVirtualDom(model, selectedModelId))];
 };
@@ -11615,6 +11748,17 @@ const getChatModelPickerPopOverVirtualDom = (models, selectedModelId, modelPicke
   }, ...getModelPickerHeaderDom(modelPickerSearchValue), ...getChatModelListVirtualDom(visibleModels, selectedModelId)];
 };
 
+const getImageCouldNotBeLoadedDom = () => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(ChatComposerAttachmentPreviewOverlayError, ImageErrorMessage),
+    name: ComposerAttachmentPreviewOverlay,
+    type: Div
+  }, {
+    text: imageCouldNotBeLoaded(),
+    type: Text
+  }];
+};
 const getComposerAttachmentPreviewOverlayVirtualDom = (composerAttachments, attachmentId, hasError) => {
   if (!attachmentId) {
     return [];
@@ -11632,15 +11776,7 @@ const getComposerAttachmentPreviewOverlayVirtualDom = (composerAttachments, atta
     onPointerOut: HandleMouseOut,
     onPointerOver: HandleMouseOver,
     type: Div
-  }, ...(hasError ? [{
-    childCount: 1,
-    className: mergeClassNames(ChatComposerAttachmentPreviewOverlayError, ImageErrorMessage),
-    name: ComposerAttachmentPreviewOverlay,
-    type: Div
-  }, {
-    text: imageCouldNotBeLoaded(),
-    type: Text
-  }] : [{
+  }, ...(hasError ? getImageCouldNotBeLoadedDom() : [{
     alt: `Large image preview for ${attachment.name}`,
     childCount: 0,
     className: ChatComposerAttachmentPreviewOverlayImage,
@@ -11657,7 +11793,7 @@ const getRunModeOptionsVirtualDom = selectedRunMode => {
   return runModes.flatMap(runMode => getCustomSelectOptionVirtualDom(getRunModePickerItemInputName(runMode), runMode, runMode === selectedRunMode));
 };
 const getRunModePickerPopOverVirtualDom = selectedRunMode => {
-  return getCustomSelectPopOverVirtualDom(runModes.length, runModePickerHeight, getRunModeOptionsVirtualDom(selectedRunMode), RunModePickerContainer, RunModePickerPopOver);
+  return getCustomSelectPopOverVirtualDom(runModes.length, runModePickerHeight, getRunModeOptionsVirtualDom(selectedRunMode), RunModePickerContainer, RunModePickerPopOver, false);
 };
 
 const getDropOverlayVirtualDom = () => {
@@ -14454,6 +14590,9 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickGitBranchPickerToggle,
     params: ['handleClickGitBranchPickerToggle']
+  }, {
+    name: HandleClickCustomSelectOverlay,
+    params: ['handleClickCustomSelectOverlay', DefaultPrevented]
   }, {
     name: HandleClickModelPickerOverlay,
     params: ['handleClickModelPickerOverlay', DefaultPrevented]
@@ -14945,6 +15084,7 @@ const commandMap = {
   'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,
   'Chat.handleClickCreatePullRequest': wrapCommand(handleClickCreatePullRequest),
+  'Chat.handleClickCustomSelectOverlay': wrapCommand(handleClickCustomSelectOverlay),
   'Chat.handleClickDelete': wrapCommand(handleClickDelete),
   'Chat.handleClickDictationButton': wrapCommand(handleClickDictationButton),
   'Chat.handleClickFileName': wrapCommand(handleClickFileName),

package/package.json

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