@lvce-editor/chat-view 1.9.0 → 1.11.0

package/dist/chatViewWorkerMain.js

@@ -1196,8 +1196,8 @@ const settings = i18nString('Settings');
 const closeChat = i18nString('Close Chat');
 const clickToOpenNewChat = i18nString('Click the + button to open a new chat.');
 const startConversation = i18nString('Start a conversation by typing below.');
-const you = i18nString('You');
-const assistant = i18nString('Assistant');
+i18nString('You');
+i18nString('Assistant');
 const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
 const sendMessage = i18nString('Send message');
 const send = i18nString('Send');
@@ -1245,7 +1245,10 @@ const createDefaultState = () => {
       messages: [],
       title: defaultSessionTitle
     }],
+    tokensMax: 0,
+    tokensUsed: 0,
     uid: 0,
+    usageOverviewEnabled: false,
     viewMode: 'list',
     warningCount: 0,
     width: 0,
@@ -1289,7 +1292,7 @@ const diffFocus = (oldState, newState) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.viewMode === newState.viewMode;
+  return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.viewMode === newState.viewMode;
 };
 
 const RenderItems = 4;
@@ -1306,8 +1309,8 @@ const diffValue = (oldState, newState) => {
   return newState.inputSource !== 'script';
 };
 
-const modules = [isEqual, diffValue, diffFocus, isEqual$1];
-const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss];
+const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -2517,8 +2520,7 @@ const renderFocus = (oldState, newState) => {
 };
 
 const renderFocusContext = (oldState, newState) => {
-  const when = 2344;
-  return [SetFocusContext, newState.uid, when];
+  return [SetFocusContext, newState.uid, FocusChatInput];
 };
 
 const ChatActions = 'ChatActions';
@@ -2533,21 +2535,26 @@ const ButtonDisabled = 'ButtonDisabled';
 const ButtonPrimary = 'ButtonPrimary';
 const IconButton = 'IconButton';
 const Label = 'Label';
+const LabelDetail = 'LabelDetail';
 const ChatList = 'ChatList';
 const ChatListEmpty = 'ChatListEmpty';
 const ChatListItem = 'ChatListItem';
 const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
+const ChatMessageContent = 'ChatMessageContent';
 const MessageUser = 'MessageUser';
 const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
 const Option = 'Option';
+const TokenUsageOverview = 'TokenUsageOverview';
+const TokenUsageRing = 'TokenUsageRing';
+const TokenUsageRingInner = 'TokenUsageRingInner';
 const Select = 'Select';
 const Viewlet = 'Viewlet';
 const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
-const HandleContextMenu = 2;
+const HandleListContextMenu = 2;
 const HandleFocus = 3;
 const HandleInput = 4;
 const HandleClick = 11;
@@ -2561,18 +2568,71 @@ const HandleClickDelete = 18;
 const HandleSubmit = 19;
 const HandleModelChange = 20;
 
-const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
+const getModelOptionDOm = (model, selectedModelId) => {
+  return [{
+    childCount: 1,
+    className: Option,
+    selected: model.id === selectedModelId,
+    type: Option$1,
+    value: model.id
+  }, text(model.name)];
+};
+
+const getSendButtonClassName = isSendDisabled => {
+  return isSendDisabled ? `${Button} ${ButtonPrimary} ${ButtonDisabled}` : `${Button} ${ButtonPrimary}`;
+};
+const getSendButtonDom = isSendDisabled => {
+  const sendButtonClassName = getSendButtonClassName(isSendDisabled);
+  return [{
+    childCount: 1,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
+    role: Button$2,
+    title: sendMessage,
+    type: Button$1
+  }, text(send)];
+};
+
+const clampToPercentage = (tokensUsed, tokensMax) => {
+  if (tokensMax <= 0) {
+    return 0;
+  }
+  const percentage = tokensUsed / tokensMax * 100;
+  return Math.max(0, Math.min(100, percentage));
+};
+
+const getUsageOverviewDom = (tokensUsed, tokensMax) => {
+  const usagePercent = clampToPercentage(tokensUsed, tokensMax);
+  const usageLabel = `${tokensUsed} / ${tokensMax}`;
+  const usageTitle = `${tokensUsed} of ${tokensMax} tokens used (${Math.round(usagePercent)}%)`;
+  return [{
+    childCount: 3,
+    className: TokenUsageOverview,
+    type: Div
+  }, {
+    childCount: 1,
+    className: TokenUsageRing,
+    style: `background: conic-gradient(var(--vscode-button-background) ${usagePercent}%, var(--vscode-editorWidget-border) 0);`,
+    title: usageTitle,
+    type: Div
+  }, {
+    childCount: 0,
+    className: TokenUsageRingInner,
+    style: 'background: var(--vscode-editor-background);',
+    type: Div
+  }, {
+    childCount: 1,
+    className: LabelDetail,
+    title: usageTitle,
+    type: Span
+  }, text(usageLabel)];
+};
+
+const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const isSendDisabled = composerValue.trim() === '';
-  const sendButtonClassName = isSendDisabled ? `${Button} ${ButtonPrimary} ${ButtonDisabled}` : `${Button} ${ButtonPrimary}`;
-  const modelOptions = models.flatMap(model => {
-    return [{
-      childCount: 1,
-      className: Option,
-      selected: model.id === selectedModelId,
-      type: Option$1,
-      value: model.id
-    }, text(model.name)];
-  });
+  const modelOptions = models.flatMap(model => getModelOptionDOm(model, selectedModelId));
   return [{
     childCount: 1,
     className: ChatSendArea,
@@ -2591,7 +2651,7 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
     type: TextArea,
     value: composerValue
   }, {
-    childCount: 2,
+    childCount: usageOverviewEnabled ? 3 : 2,
     className: ChatSendAreaBottom,
     type: Div
   }, {
@@ -2601,16 +2661,23 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
     onInput: HandleModelChange,
     type: Select$1,
     value: selectedModelId
-  }, ...modelOptions, {
+  }, ...modelOptions, ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...getSendButtonDom(isSendDisabled)];
+};
+
+const getBackButtonVirtualDom = () => {
+  return [{
     childCount: 1,
-    className: sendButtonClassName,
-    disabled: isSendDisabled,
-    name: 'send',
-    onClick: HandleSubmit,
+    className: IconButton,
+    name: 'back',
+    onClick: HandleClickBack,
     role: Button$2,
-    title: sendMessage,
+    title: backToChats,
     type: Button$1
-  }, text(send)];
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconArrowLeft',
+    type: Div
+  }];
 };
 
 const getHeaderActionVirtualDom = item => {
@@ -2622,22 +2689,26 @@ const getHeaderActionVirtualDom = item => {
     role: Button$2,
     title: item.title,
     type: Button$1
-  }, text(item.icon)];
+  }, {
+    childCount: 0,
+    className: item.icon,
+    type: Div
+  }];
 };
 
 const getChatHeaderActionsDom = () => {
   const items = [{
-    icon: '+',
+    icon: 'MaskIcon MaskIconAdd',
     name: 'create-session',
     onClick: HandleClickNew,
     title: newChat
   }, {
-    icon: '⚙',
+    icon: 'MaskIcon MaskIconSettingsGear',
     name: 'settings',
     onClick: HandleClickSettings,
     title: settings
   }, {
-    icon: '×',
+    icon: 'MaskIcon MaskIconClose',
     name: 'close-chat',
     onClick: HandleClickClose,
     title: closeChat
@@ -2649,18 +2720,6 @@ const getChatHeaderActionsDom = () => {
   }, ...items.flatMap(getHeaderActionVirtualDom)];
 };
 
-const getChatHeaderBackButtonVirtualDom = () => {
-  return [{
-    childCount: 1,
-    className: IconButton,
-    name: 'back',
-    onClick: HandleClickBack,
-    role: Button$2,
-    title: backToChats,
-    type: Button$1
-  }, text('←')];
-};
-
 const getChatHeaderDomDetailMode = selectedSessionTitle => {
   return [{
     childCount: 2,
@@ -2670,7 +2729,7 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
     childCount: 2,
     className: ChatName,
     type: Div
-  }, ...getChatHeaderBackButtonVirtualDom(), {
+  }, ...getBackButtonVirtualDom(), {
     childCount: 1,
     className: Label,
     type: Span
@@ -2680,14 +2739,14 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
 const getChatMessageDom = message => {
   const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   return [{
-    childCount: 2,
+    childCount: 1,
     className: mergeClassNames(Message, roleClassName),
     type: Div
   }, {
     childCount: 1,
-    className: Label,
+    className: ChatMessageContent,
     type: Div
-  }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
+  }, {
     childCount: 1,
     className: Markdown,
     type: P
@@ -2709,7 +2768,7 @@ const getMessagesDom = messages => {
   }, ...messages.flatMap(getChatMessageDom)];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle;
   const messages = selectedSession ? selectedSession.messages : [];
@@ -2717,7 +2776,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue,
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2754,7 +2813,7 @@ const getSessionDom = session => {
     childCount: 1,
     className: ChatListItemLabel,
     name: `session:${session.id}`,
-    onContextMenu: HandleContextMenu,
+    onContextMenu: HandleListContextMenu,
     tabIndex: 0,
     type: Div
   }, text(session.title), {
@@ -2786,12 +2845,12 @@ const getChatListDom = (sessions, selectedSessionId) => {
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -2801,12 +2860,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text('Unknown view mode')];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -2820,13 +2879,16 @@ const renderItems = (oldState, newState) => {
     selectedModelId,
     selectedSessionId,
     sessions,
+    tokensMax,
+    tokensUsed,
     uid,
+    usageOverviewEnabled,
     viewMode
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
   return [SetDom2, uid, dom];
 };
 
@@ -2887,8 +2949,8 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
-    name: HandleContextMenu,
-    params: ['handleChatListContextMenu', TargetName, ClientX, ClientY],
+    name: HandleListContextMenu,
+    params: ['handleChatListContextMenu', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleClick,

package/package.json

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