@lvce-editor/chat-view 6.64.0 → 6.66.0

package/dist/chatViewWorkerMain.js

@@ -1865,13 +1865,19 @@ const StartConversationByTypingBelow = 'Start a conversation by typing below.';
 const NoMatchingModelsFound = 'No matching models have been found.';
 const ComposePlaceholder = 'Type your message. Enter to send.';
 const AttachImageAsContext = 'Attach Image as Context';
-const RemoveImageAttachment = 'Remove image attachment';
+const OpenImageInNewTab = 'Open image in new tab';
+const RemoveAttachment = 'Remove attachment';
 const ImageCouldNotBeLoaded = 'image could not be loaded';
 const OpenRouterApiKeyPlaceholder = 'Enter OpenRouter API key';
 const OpenApiApiKeyPlaceholder = 'Enter OpenAI API key';
 const SendMessage = 'Send message';
 const StartVoiceDictation = 'Start voice dictation';
 const AddContext$1 = 'Add Context';
+const AddAction = 'Add Action';
+const OpenInVsCode = 'Open in VSCode';
+const Commit = 'Commit';
+const OpenTerminal = 'Open Terminal';
+const ShowDiff = 'Show Diff';
 const CreatePullRequest$2 = 'Create PR';
 const Save = 'Save';
 const Saving = 'Saving...';
@@ -1960,8 +1966,11 @@ const composePlaceholder = () => {
 const attachImageAsContext = () => {
   return i18nString(AttachImageAsContext);
 };
-const removeImageAttachment = () => {
-  return i18nString(RemoveImageAttachment);
+const openImageInNewTab = () => {
+  return i18nString(OpenImageInNewTab);
+};
+const removeAttachment = () => {
+  return i18nString(RemoveAttachment);
 };
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
@@ -1981,6 +1990,21 @@ const startVoiceDictation = () => {
 const addContext = () => {
   return i18nString(AddContext$1);
 };
+const addAction = () => {
+  return i18nString(AddAction);
+};
+const openInVsCode = () => {
+  return i18nString(OpenInVsCode);
+};
+const commit = () => {
+  return i18nString(Commit);
+};
+const openTerminal = () => {
+  return i18nString(OpenTerminal);
+};
+const showDiff = () => {
+  return i18nString(ShowDiff);
+};
 const createPullRequest = () => {
   return i18nString(CreatePullRequest$2);
 };
@@ -3245,6 +3269,24 @@ const getKeyBindings = () => {
   }];
 };
 
+const getMenuEntriesChatAttachment = (attachmentId, previewSrc) => {
+  return [{
+    args: [previewSrc],
+    command: 'Chat.openChatAttachmentInNewTab',
+    flags: None,
+    id: 'openImageInNewTab',
+    // @ts-ignore
+    label: openImageInNewTab()
+  }, {
+    args: [attachmentId],
+    command: 'Chat.removeComposerAttachment',
+    flags: None,
+    id: 'removeAttachment',
+    // @ts-ignore
+    label: removeAttachment()
+  }];
+};
+
 const getMenuEntriesChatHeader = () => {
   // TODO
   return [{
@@ -3304,10 +3346,16 @@ const Composer = 'composer';
 const Search = 'search';
 const ComposerDropTarget = 'composer-drop-target';
 const ComposerAttachmentPrefix = 'composer-attachment:';
+const ComposerAttachmentPreviewPrefix = 'composer-attachment-preview:';
 const ComposerAttachmentRemovePrefix = 'composer-attachment-remove:';
 const AddContext = 'add-context';
 const Dictate = 'dictate';
 const CreatePullRequest$1 = 'create-pull-request';
+const FocusAddAction = 'focus-add-action';
+const FocusOpenInVsCode = 'focus-open-in-vscode';
+const FocusCommit = 'focus-commit';
+const FocusOpenTerminal = 'focus-open-terminal';
+const FocusShowDiff = 'focus-show-diff';
 const Send = 'send';
 const Back = 'back';
 const ModelPickerToggle = 'model-picker-toggle';
@@ -3377,6 +3425,12 @@ const getComposerAttachmentInputName = attachmentId => {
 const getComposerAttachmentRemoveInputName = attachmentId => {
   return `${ComposerAttachmentRemovePrefix}${attachmentId}`;
 };
+const isComposerAttachmentPreviewInputName = name => {
+  return name.startsWith(ComposerAttachmentPreviewPrefix);
+};
+const getAttachmentIdFromComposerAttachmentPreviewInputName = name => {
+  return name.slice(ComposerAttachmentPreviewPrefix.length);
+};
 const isComposerAttachmentRemoveInputName = name => {
   return name.startsWith(ComposerAttachmentRemovePrefix);
 };
@@ -3452,12 +3506,15 @@ const MenuChatHeader = 2179;
 const MenuChatInput = 2180;
 const MenuProjectAddButton = 2181;
 const MenuChatProjectList = 2182;
+const MenuChatAttachment = 2183;
 const getMenuEntryIds = () => {
-  return [Chat$2, MenuChatList, MenuChatHeader, MenuChatInput, MenuProjectAddButton, MenuChatProjectList];
+  return [Chat$2, MenuChatList, MenuChatHeader, MenuChatInput, MenuProjectAddButton, MenuChatProjectList, MenuChatAttachment];
 };
 
 const getMenuEntries = (menuId, props) => {
   switch (props.menuId) {
+    case MenuChatAttachment:
+      return getMenuEntriesChatAttachment(props.attachmentId, props.previewSrc);
     case MenuChatHeader:
       return getMenuEntriesChatHeader();
     case MenuChatInput:
@@ -6500,6 +6557,9 @@ const Chat = 'Chat';
 const ChatActions = 'ChatActions';
 const ChatAuthError = 'ChatAuthError';
 const ChatFocus = 'ChatFocus';
+const ChatFocusActions = 'ChatFocusActions';
+const ChatFocusHeader = 'ChatFocusHeader';
+const ChatFocusProject = 'ChatFocusProject';
 const ChatHeader = 'ChatHeader';
 const ChatHeaderLabel = 'ChatHeaderLabel';
 const ChatInputBox = 'ChatInputBox';
@@ -6528,6 +6588,7 @@ const ChatOverlays = 'ChatOverlays';
 const ChatOrderedList = 'ChatOrderedList';
 const ChatOrderedListItem = 'ChatOrderedListItem';
 const ChatOrderedListItemContent = 'ChatOrderedListItemContent';
+const ChatOrderedListItemPrefix = 'ChatOrderedListItemPrefix';
 const ChatOrderedListMarker = 'ChatOrderedListMarker';
 const ChatComposerAttachment = 'ChatComposerAttachment';
 const ChatComposerAttachmentImage = 'ChatComposerAttachmentImage';
@@ -8979,7 +9040,8 @@ const handleRemoveComposerAttachment = async (state, attachmentId) => {
   }
   return {
     ...state,
-    composerAttachments: nextComposerAttachments
+    composerAttachments: nextComposerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(nextComposerAttachments, state.width)
   };
 };
 
@@ -9423,7 +9485,23 @@ const handleClickSettings = async () => {
   await invoke('Main.openUri', 'app://settings.json');
 };
 
-const handleContextMenuChatImageAttachment = async state => {
+const handleContextMenuChatImageAttachment = async (state, name, eventX, eventY) => {
+  const getFallbackAttachment = () => {
+    const attachmentsWithPreview = state.composerAttachments.filter(attachment => attachment.previewSrc);
+    if (attachmentsWithPreview.length !== 1) {
+      return undefined;
+    }
+    return attachmentsWithPreview[0];
+  };
+  const attachment = isComposerAttachmentPreviewInputName(name) ? state.composerAttachments.find(item => item.attachmentId === getAttachmentIdFromComposerAttachmentPreviewInputName(name)) : getFallbackAttachment();
+  if (!attachment?.previewSrc) {
+    return state;
+  }
+  await showContextMenu2(state.uid, MenuChatAttachment, eventX, eventY, {
+    attachmentId: attachment.attachmentId,
+    menuId: MenuChatAttachment,
+    previewSrc: attachment.previewSrc
+  });
   return state;
 };
 
@@ -10672,6 +10750,10 @@ const registerMockResponse = (state, mockResponse) => {
   return state;
 };
 
+const removeComposerAttachment = async (state, attachmentId) => {
+  return handleRemoveComposerAttachment(state, attachmentId);
+};
+
 const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, chatFocusContentMaxWidth, textAreaPaddingTop, textAreaPaddingLeft, textAreaPaddingRight, textAreaPaddingBottom, chatSendAreaPaddingTop, chatSendAreaPaddingLeft, chatSendAreaPaddingRight, chatSendAreaPaddingBottom, renderHtmlCss) => {
   const buttonsHeight = 20;
   const gap = 10;
@@ -10791,6 +10873,10 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   pointer-events: auto;
 }
 
+.ChatViewDropOverlayActive{
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .RunModePickerPopOver{
   overflow: hidden;
   border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
@@ -10803,6 +10889,26 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   color: var(--vscode-textLink-foreground);
 }
 
+.ChatOrderedListItem{
+  align-items: flex-start;
+  display: flex;
+  gap: 8px;
+}
+
+.ChatOrderedListMarker{
+  flex: none;
+  min-width: 1.5em;
+}
+
+.ChatOrderedListItemContent{
+  flex: 1;
+  min-width: 0;
+}
+
+.ChatOrderedListItemPrefix{
+  white-space: nowrap;
+}
+
 .ChatToolCalls .ChatOrderedList{
   list-style: none;
   margin: 0;
@@ -10825,6 +10931,15 @@ const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, li
   min-width: 0;
 }
 
+.ChatFocus .ChatMessages > .Message{
+  inline-size: fit-content;
+  max-inline-size: min(100%, var(--ChatFocusContentMaxWidth));
+}
+
+.ChatFocus .ChatMessages > .Message > .ChatMessageContent{
+  max-inline-size: 100%;
+}
+
 `;
   return `${baseCss}
 
@@ -11218,16 +11333,13 @@ const getComposerAttachmentClassName = displayType => {
   }
 };
 const getComposerAttachmentRemoveButtonDom = attachment => {
-  if (attachment.displayType !== 'image') {
-    return [];
-  }
   return [{
     buttonType: 'button',
     childCount: 1,
     className: ChatComposerAttachmentRemoveButton,
     name: getComposerAttachmentRemoveInputName(attachment.attachmentId),
     onClick: HandleClick,
-    title: removeImageAttachment(),
+    title: removeAttachment(),
     type: Button$1
   }, {
     text: 'x',
@@ -11242,6 +11354,8 @@ const getComposerAttachmentPreviewDom = attachment => {
     alt: `Image preview for ${attachment.name}`,
     childCount: 0,
     className: ChatComposerAttachmentPreview,
+    name: getComposerAttachmentInputName(attachment.attachmentId),
+    onContextMenu: HandleContextMenuChatImageAttachment,
     src: attachment.previewSrc,
     type: Img
   }];
@@ -11317,6 +11431,57 @@ const getChatSendAreaDom = (composerValue, composerAttachments, agentMode, agent
   }, ...(showAgentModePicker ? getAgentModePickerVirtualDom(agentMode, agentModePickerOpen) : []), ...getChatModelPickerToggleVirtualDom(models, selectedModelId, modelPickerOpen), ...(reasoningPickerEnabled ? getReasoningEffortPickerVirtualDom(reasoningEffort, reasoningEffortPickerOpen) : []), ...(showResponsiveRunModePicker ? getRunModePickerVirtualDom(runMode, runModePickerOpen) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...(showCreatePullRequestButton ? getCreatePullRequestButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
 };
 
+const focusHeaderStyle = 'align-items:center;border-bottom:1px solid var(--vscode-panel-border, transparent);display:flex;gap:12px;justify-content:space-between;padding:8px 12px;';
+const focusHeaderMetaStyle = 'align-items:baseline;display:flex;gap:8px;min-width:0;overflow:hidden;';
+const focusHeaderTitleStyle = 'margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+const focusHeaderProjectStyle = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+const focusHeaderActionsStyle = 'display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;';
+const focusHeaderButtonStyle = 'white-space:nowrap;';
+const getFocusHeaderActionButtonDom = (label, name) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(Button, ButtonSecondary),
+    inputType: 'button',
+    name,
+    onClick: HandleClick,
+    style: focusHeaderButtonStyle,
+    title: label,
+    type: Button$1
+  }, text(label)];
+};
+const getChatHeaderDomFocusMode = (selectedSessionTitle, selectedProjectName) => {
+  const items = [[addAction(), FocusAddAction], [openInVsCode(), FocusOpenInVsCode], [commit(), FocusCommit], [openTerminal(), FocusOpenTerminal], [showDiff(), FocusShowDiff]];
+  const hasProjectName = !!selectedProjectName;
+  return [{
+    childCount: 2,
+    className: ChatFocusHeader,
+    style: focusHeaderStyle,
+    type: Header
+  }, {
+    childCount: hasProjectName ? 2 : 1,
+    className: ChatName,
+    style: focusHeaderMetaStyle,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatHeaderLabel,
+    style: focusHeaderTitleStyle,
+    type: H2
+  }, text(selectedSessionTitle), ...(hasProjectName ? [{
+    childCount: 1,
+    className: mergeClassNames(LabelDetail, ChatFocusProject),
+    style: focusHeaderProjectStyle,
+    type: Span
+  }, text(selectedProjectName)] : []), {
+    'aria-label': 'focus header actions',
+    childCount: items.length,
+    className: ChatFocusActions,
+    role: ToolBar,
+    style: focusHeaderActionsStyle,
+    type: Div
+  }, ...items.flatMap(([label, name]) => getFocusHeaderActionButtonDom(label, name))];
+};
+
 const getCustomSelectPopOverVirtualDom = (optionCount, height, optionNodes, containerClassName = '', popOverClassName = '') => {
   return [{
     childCount: 1,
@@ -11616,24 +11781,69 @@ const getHeadingDom = (node, useChatMathWorker) => {
   }, ...node.children.flatMap(child => getInlineNodeDom(child, useChatMathWorker))];
 };
 
+const leadingPunctuationRegex = /^([:;,.!?]+)([\s\S]*)$/;
+const splitLeadingPunctuation = children => {
+  const [firstChild, secondChild, ...restChildren] = children;
+  if (firstChild?.type !== 'bold' || secondChild?.type !== 'text') {
+    return {
+      prefixChildren: [],
+      remainingChildren: children
+    };
+  }
+  const match = secondChild.text.match(leadingPunctuationRegex);
+  if (!match) {
+    return {
+      prefixChildren: [],
+      remainingChildren: children
+    };
+  }
+  const [, punctuation, remainingText] = match;
+  const nextChildren = restChildren;
+  if (remainingText) {
+    nextChildren.unshift({
+      text: remainingText,
+      type: 'text'
+    });
+  }
+  return {
+    prefixChildren: [firstChild, {
+      text: punctuation,
+      type: 'text'
+    }],
+    remainingChildren: nextChildren
+  };
+};
 const getOrderedListItemDom = (item, useChatMathWorker, fallbackIndex, recurseOrdered, recurseUnordered) => {
   const hasNestedList = (item.nestedItems?.length || 0) > 0;
   const nestedListType = item.nestedListType || 'unordered-list';
+  const {
+    prefixChildren,
+    remainingChildren
+  } = splitLeadingPunctuation(item.children);
   const nestedListDom = hasNestedList ? [{
     childCount: item.nestedItems?.length || 0,
     className: nestedListType === 'ordered-list' ? ChatOrderedList : ChatUnorderedList,
     type: nestedListType === 'ordered-list' ? Ol : Ul
   }, ...(item.nestedItems || []).flatMap((nestedItem, index) => nestedListType === 'ordered-list' ? recurseOrdered(nestedItem, useChatMathWorker, index + 1) : recurseUnordered(nestedItem, useChatMathWorker))] : [];
   const marker = `${item.index ?? fallbackIndex}.`;
+  const prefixDom = prefixChildren.length === 0 ? [] : [{
+    childCount: prefixChildren.length,
+    className: ChatOrderedListItemPrefix,
+    type: Span
+  }, ...prefixChildren.flatMap(child => getInlineNodeDom(child, useChatMathWorker))];
   return [{
-    childCount: item.children.length + (hasNestedList ? 1 : 0) + 1,
+    childCount: 2,
     className: ChatOrderedListItem,
     type: Li
   }, {
     childCount: 1,
     className: ChatOrderedListMarker,
     type: Span
-  }, text(marker), ...item.children.flatMap(child => getInlineNodeDom(child, useChatMathWorker)), ...nestedListDom];
+  }, text(marker), {
+    childCount: (prefixDom.length === 0 ? 0 : 1) + remainingChildren.length + (hasNestedList ? 1 : 0),
+    className: ChatOrderedListItemContent,
+    type: Div
+  }, ...prefixDom, ...remainingChildren.flatMap(child => getInlineNodeDom(child, useChatMathWorker)), ...nestedListDom];
 };
 
 const getTableHeadCellDom = (cell, useChatMathWorker) => {
@@ -12839,24 +13049,26 @@ const getMessagesDom = (messages, parsedMessages, openRouterApiKeyInput, openApi
     className: 'ChatMessages',
     onContextMenu: HandleMessagesContextMenu,
     onScroll: HandleMessagesScroll,
+    role: 'log',
     scrollTop: messagesScrollTop,
     type: Div
   }, ...displayMessages.flatMap(item => getChatMessageDom(item.message, item.parsedContent, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, useChatMathWorker))];
 };
 
+const arrowLeft$1 = {
+  childCount: 0,
+  className: mergeClassNames(MaskIcon, MaskIconArrowLeft),
+  type: Div
+};
 const getBackToChatsButtonDom = () => {
   return [{
     childCount: 1,
-    className: mergeClassNames(Button, ButtonSecondary),
-    inputType: 'button',
+    className: IconButton,
     name: Back,
     onClick: HandleClickBack,
     title: backToChatList(),
     type: Button$1
-  }, {
-    text: backToChatList(),
-    type: Text
-  }];
+  }, arrowLeft$1];
 };
 
 const getProjectSessionDom = (session, selectedSessionId) => {
@@ -12999,21 +13211,24 @@ const getChatModeChatFocusVirtualDom = ({
   voiceDictationEnabled = false
 }) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  const selectedProject = projects.find(project => project.id === selectedProjectId);
   const messages = selectedSession ? selectedSession.messages : [];
+  const selectedSessionTitle = selectedSession?.title || chatTitle();
+  const selectedProjectName = selectedProject?.name || '';
   const showCreatePullRequestButton = canCreatePullRequest(selectedSession);
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
   const isAgentModePickerVisible = hasSpaceForAgentModePicker && agentModePickerOpen;
   const isNewModelPickerVisible = modelPickerOpen;
   const isRunModePickerVisible = showRunMode && hasSpaceForRunModePicker && runModePickerOpen;
   const hasVisibleOverlays = isDropOverlayVisible || isAgentModePickerVisible || isNewModelPickerVisible || isRunModePickerVisible;
-  const chatRootChildCount = 3 + (hasVisibleOverlays ? 1 : 0);
+  const chatRootChildCount = 4 + (hasVisibleOverlays ? 1 : 0);
   return [{
     childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat, ChatFocus),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop, true), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled), ...getChatOverlaysVirtualDom({
+  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop, true), ...getChatHeaderDomFocusMode(selectedSessionTitle, selectedProjectName), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled), ...getChatOverlaysVirtualDom({
     agentMode,
     agentModePickerVisible: isAgentModePickerVisible,
     dropOverlayVisible: isDropOverlayVisible,
@@ -14081,7 +14296,7 @@ const renderEventListeners = () => {
     params: ['handleModelInputBlur']
   }, {
     name: HandleContextMenuChatImageAttachment,
-    params: ['handleContextMenuChatImageAttachment'],
+    params: ['handleContextMenuChatImageAttachment', TargetName, ClientX, ClientY],
     preventDefault: true
   }];
 };
@@ -14482,6 +14697,7 @@ const commandMap = {
   'Chat.openRunModePicker': wrapCommand(openRunModePicker),
   'Chat.pasteInput': wrapCommand(pasteInput),
   'Chat.registerMockResponse': wrapCommand(registerMockResponse),
+  'Chat.removeComposerAttachment': wrapCommand(removeComposerAttachment),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
   'Chat.rerender': wrapCommand(rerender),

package/package.json

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