@lvce-editor/chat-view 3.1.0 → 3.3.0

package/dist/chatViewWorkerMain.js

@@ -1463,6 +1463,7 @@ const createDefaultState = () => {
   const composerFontSize = 13;
   const composerLineHeight = 20;
   return {
+    aiSessionTitleGenerationEnabled: false,
     assetDir: '',
     chatListScrollTop: 0,
     chatMessageFontFamily: 'system-ui',
@@ -1508,7 +1509,7 @@ const createDefaultState = () => {
       messages: [],
       title: defaultSessionTitle()
     }],
-    streamingEnabled: false,
+    streamingEnabled: true,
     tokensMax: 0,
     tokensUsed: 0,
     uid: 0,
@@ -4663,7 +4664,7 @@ const getAiResponse = async ({
   passIncludeObfuscation = false,
   platform,
   selectedModelId,
-  streamingEnabled = false,
+  streamingEnabled = true,
   useMockApi,
   userText,
   webSearchEnabled = false
@@ -4807,6 +4808,7 @@ const handleClickSaveOpenApiApiKey = async state => {
     openRouterApiKey: updatedState.openRouterApiKey,
     platform: updatedState.platform,
     selectedModelId: updatedState.selectedModelId,
+    streamingEnabled: updatedState.streamingEnabled,
     useMockApi: updatedState.useMockApi,
     userText: previousUserMessage.text
   });
@@ -5014,6 +5016,10 @@ const handleToolCallsChunkFunction = async (uid, assistantMessageId, toolCalls,
   };
 };
 
+const slashCommandRegex = /^\/(clear|export|help|new)(?:\s+.*)?$/;
+const mentionRegex = /(^|\s)@([^\s]+)/g;
+const maxMentionCount = 5;
+const maxMentionTextLength = 8000;
 const appendMessageToSelectedSession = (sessions, selectedSessionId, message) => {
   return sessions.map(session => {
     if (session.id !== selectedSessionId) {
@@ -5067,8 +5073,208 @@ const isStreamingFunctionCallEvent = parsed => {
 const getSseEventType = value => {
   return value && typeof value === 'object' && Reflect.get(value, 'type') === 'response.completed' ? 'sse-response-completed' : 'sse-response-part';
 };
+const getCommandHelpText = () => {
+  return ['Available commands:', '/new - Create and switch to a new chat session.', '/clear - Clear messages in the selected chat session.', '/export - Export current chat session as Markdown.', '/help - Show this help.'].join('\n');
+};
+const withClearedComposer = state => {
+  return focusInput({
+    ...state,
+    composerHeight: getMinComposerHeightForState(state),
+    composerValue: '',
+    inputSource: 'script'
+  });
+};
+const toMarkdownTranscript = session => {
+  const lines = [`# ${session.title}`, ''];
+  for (const message of session.messages) {
+    const role = message.role === 'assistant' ? 'Assistant' : 'User';
+    lines.push(`## ${role}`);
+    lines.push(message.text || '(empty)');
+    lines.push('');
+  }
+  return lines.join('\n').trim();
+};
+const executeSlashCommand = async (state, command) => {
+  if (command === 'new') {
+    const nextState = await createSession(state);
+    return withClearedComposer({
+      ...nextState,
+      viewMode: 'detail'
+    });
+  }
+  const selectedSession = state.sessions.find(session => session.id === state.selectedSessionId);
+  if (!selectedSession) {
+    return withClearedComposer(state);
+  }
+  if (command === 'clear') {
+    const updatedSessions = state.sessions.map(session => {
+      if (session.id !== state.selectedSessionId) {
+        return session;
+      }
+      return {
+        ...session,
+        messages: []
+      };
+    });
+    const updatedSelectedSession = updatedSessions.find(session => session.id === state.selectedSessionId);
+    if (updatedSelectedSession) {
+      await saveChatSession(updatedSelectedSession);
+    }
+    return withClearedComposer({
+      ...state,
+      sessions: updatedSessions
+    });
+  }
+  const assistantText = command === 'help' ? getCommandHelpText() : ['```md', toMarkdownTranscript(selectedSession), '```'].join('\n');
+  const assistantMessage = {
+    id: crypto.randomUUID(),
+    role: 'assistant',
+    text: assistantText,
+    time: new Date().toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  };
+  const updatedSessions = appendMessageToSelectedSession(state.sessions, state.selectedSessionId, assistantMessage);
+  const updatedSelectedSession = updatedSessions.find(session => session.id === state.selectedSessionId);
+  if (updatedSelectedSession) {
+    await saveChatSession(updatedSelectedSession);
+  }
+  return withClearedComposer({
+    ...state,
+    sessions: updatedSessions
+  });
+};
+const getSlashCommand = value => {
+  const trimmed = value.trim();
+  const match = trimmed.match(slashCommandRegex);
+  if (!match) {
+    return undefined;
+  }
+  return match[1];
+};
+const parseMentionedPaths = value => {
+  const matches = value.matchAll(mentionRegex);
+  const paths = [];
+  for (const match of matches) {
+    const rawPath = match[2] || '';
+    const cleanedPath = rawPath.replaceAll(/[),.;:!?]+$/g, '');
+    if (!cleanedPath || isPathTraversalAttempt(cleanedPath)) {
+      continue;
+    }
+    const normalizedPath = normalizeRelativePath(cleanedPath);
+    if (paths.includes(normalizedPath)) {
+      continue;
+    }
+    paths.push(normalizedPath);
+    if (paths.length >= maxMentionCount) {
+      break;
+    }
+  }
+  return paths;
+};
+const getMentionContextMessage = async value => {
+  const paths = parseMentionedPaths(value);
+  if (paths.length === 0) {
+    return undefined;
+  }
+  const sections = [];
+  for (const path of paths) {
+    try {
+      const fileContent = await readFile(path);
+      const truncatedContent = fileContent.length > maxMentionTextLength ? `${fileContent.slice(0, maxMentionTextLength)}\n... [truncated]` : fileContent;
+      sections.push([`File: ${path}`, '```text', truncatedContent, '```'].join('\n'));
+    } catch (error) {
+      sections.push([`File: ${path}`, `Error: ${String(error)}`].join('\n'));
+    }
+  }
+  return {
+    id: crypto.randomUUID(),
+    role: 'user',
+    text: ['Referenced file context:', ...sections].join('\n\n'),
+    time: new Date().toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  };
+};
+const isDefaultSessionTitle = title => {
+  return /^Chat \d+$/.test(title);
+};
+const sanitizeGeneratedTitle = value => {
+  return value.replace(/^title:\s*/i, '').replaceAll(/^['"`\s]+|['"`\s]+$/g, '').replaceAll(/\s+/g, ' ').trim().slice(0, 80);
+};
+const updateSessionTitle = (sessions, selectedSessionId, title) => {
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      title
+    };
+  });
+};
+const getAiSessionTitle = async (state, userText, assistantText) => {
+  const {
+    models,
+    openApiApiBaseUrl,
+    openApiApiKey,
+    openRouterApiBaseUrl,
+    openRouterApiKey,
+    selectedModelId,
+    useMockApi
+  } = state;
+  if (useMockApi) {
+    return '';
+  }
+  const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
+  const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
+  if (usesOpenApiModel && !openApiApiKey) {
+    return '';
+  }
+  if (usesOpenRouterModel && !openRouterApiKey) {
+    return '';
+  }
+  if (!usesOpenApiModel && !usesOpenRouterModel) {
+    return '';
+  }
+  const titlePrompt = `Create a concise title (max 6 words) for this conversation. Respond only with the title, no punctuation at the end.
+User: ${userText}
+Assistant: ${assistantText}`;
+  const promptMessage = {
+    id: crypto.randomUUID(),
+    role: 'user',
+    text: titlePrompt,
+    time: new Date().toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  };
+  const titleResponse = await getAiResponse({
+    assetDir: state.assetDir,
+    messages: [promptMessage],
+    mockAiResponseDelay: state.mockAiResponseDelay,
+    mockApiCommandId: state.mockApiCommandId,
+    models,
+    openApiApiBaseUrl,
+    openApiApiKey,
+    openRouterApiBaseUrl,
+    openRouterApiKey,
+    passIncludeObfuscation: state.passIncludeObfuscation,
+    platform: state.platform,
+    selectedModelId,
+    streamingEnabled: false,
+    useMockApi,
+    userText: titlePrompt,
+    webSearchEnabled: false
+  });
+  const title = sanitizeGeneratedTitle(titleResponse.text);
+  return title && !isDefaultSessionTitle(title) ? title : '';
+};
 const handleSubmit = async state => {
   const {
+    aiSessionTitleGenerationEnabled,
     assetDir,
     composerValue,
     emitStreamingFunctionCallEvents,
@@ -5094,6 +5300,10 @@ const handleSubmit = async state => {
   if (!userText) {
     return state;
   }
+  const slashCommand = getSlashCommand(userText);
+  if (slashCommand) {
+    return executeSlashCommand(state, slashCommand);
+  }
   const userTime = new Date().toLocaleTimeString([], {
     hour: '2-digit',
     minute: '2-digit'
@@ -5130,6 +5340,7 @@ const handleSubmit = async state => {
     }
   }
   let optimisticState;
+  const createsNewSession = viewMode === 'list';
   if (viewMode === 'list') {
     const newSessionId = generateSessionId();
     await appendChatViewEvent({
@@ -5187,13 +5398,15 @@ const handleSubmit = async state => {
   };
   const selectedOptimisticSession = optimisticState.sessions.find(session => session.id === optimisticState.selectedSessionId);
   const messages = (selectedOptimisticSession?.messages ?? []).filter(message => !message.inProgress);
+  const mentionContextMessage = await getMentionContextMessage(userText);
+  const messagesWithMentionContext = mentionContextMessage ? [...messages, mentionContextMessage] : messages;
   const handleTextChunkFunctionRef = streamingEnabled ? async chunk => {
     handleTextChunkState = await handleTextChunkFunction(state.uid, assistantMessageId, chunk, handleTextChunkState);
   } : undefined;
   const assistantMessage = await getAiResponse({
     assetDir,
     messageId: assistantMessageId,
-    messages,
+    messages: messagesWithMentionContext,
     mockAiResponseDelay,
     mockApiCommandId,
     models,
@@ -5238,7 +5451,16 @@ const handleSubmit = async state => {
   const {
     latestState
   } = handleTextChunkState;
-  const updatedSessions = streamingEnabled ? updateMessageTextInSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessageId, assistantMessage.text, false) : appendMessageToSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessage);
+  let updatedSessions = streamingEnabled ? updateMessageTextInSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessageId, assistantMessage.text, false) : appendMessageToSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessage);
+  if (aiSessionTitleGenerationEnabled && createsNewSession) {
+    const selectedSession = updatedSessions.find(session => session.id === latestState.selectedSessionId);
+    if (selectedSession && isDefaultSessionTitle(selectedSession.title)) {
+      const generatedTitle = await getAiSessionTitle(latestState, userText, assistantMessage.text);
+      if (generatedTitle) {
+        updatedSessions = updateSessionTitle(updatedSessions, latestState.selectedSessionId, generatedTitle);
+      }
+    }
+  }
   const selectedSession = updatedSessions.find(session => session.id === latestState.selectedSessionId);
   if (selectedSession) {
     await saveChatSession(selectedSession);
@@ -5704,6 +5926,15 @@ const getSavedViewMode = savedState => {
   return viewMode;
 };
 
+const loadAiSessionTitleGenerationEnabled = async () => {
+  try {
+    const savedAiSessionTitleGenerationEnabled = await get('chatView.aiSessionTitleGenerationEnabled');
+    return typeof savedAiSessionTitleGenerationEnabled === 'boolean' ? savedAiSessionTitleGenerationEnabled : false;
+  } catch {
+    return false;
+  }
+};
+
 const loadEmitStreamingFunctionCallEvents = async () => {
   try {
     const savedEmitStreamingFunctionCallEvents = await get('chatView.emitStreamingFunctionCallEvents');
@@ -5751,19 +5982,16 @@ const loadPassIncludeObfuscation = async () => {
 const loadStreamingEnabled = async () => {
   try {
     const savedStreamingEnabled = await get('chatView.streamingEnabled');
-    return typeof savedStreamingEnabled === 'boolean' ? savedStreamingEnabled : false;
+    return typeof savedStreamingEnabled === 'boolean' ? savedStreamingEnabled : true;
   } catch {
-    return false;
+    return true;
   }
 };
 
 const loadPreferences = async () => {
-  const openApiApiKey = await loadOpenApiApiKey();
-  const openRouterApiKey = await loadOpenRouterApiKey();
-  const emitStreamingFunctionCallEvents = await loadEmitStreamingFunctionCallEvents();
-  const streamingEnabled = await loadStreamingEnabled();
-  const passIncludeObfuscation = await loadPassIncludeObfuscation();
+  const [aiSessionTitleGenerationEnabled, openApiApiKey, openRouterApiKey, emitStreamingFunctionCallEvents, streamingEnabled, passIncludeObfuscation] = await Promise.all([loadAiSessionTitleGenerationEnabled(), loadOpenApiApiKey(), loadOpenRouterApiKey(), loadEmitStreamingFunctionCallEvents(), loadStreamingEnabled(), loadPassIncludeObfuscation()]);
   return {
+    aiSessionTitleGenerationEnabled,
     emitStreamingFunctionCallEvents,
     openApiApiKey,
     openRouterApiKey,
@@ -5799,6 +6027,7 @@ const loadContent = async (state, savedState) => {
   const savedSelectedModelId = getSavedSelectedModelId(savedState);
   const savedViewMode = getSavedViewMode(savedState);
   const {
+    aiSessionTitleGenerationEnabled,
     emitStreamingFunctionCallEvents,
     openApiApiKey,
     openRouterApiKey,
@@ -5831,6 +6060,7 @@ const loadContent = async (state, savedState) => {
   const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
+    aiSessionTitleGenerationEnabled,
     chatListScrollTop,
     emitStreamingFunctionCallEvents,
     initial: false,
@@ -5902,6 +6132,13 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   };
 };
 
+const registerMockResponse = (state, mockResponse) => {
+  reset$1();
+  pushChunk(mockResponse.text);
+  finish();
+  return state;
+};
+
 const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, renderHtmlCss) => {
   const baseCss = `:root {
   --ChatInputBoxHeight: ${composerHeight}px;
@@ -5967,6 +6204,17 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
   cursor: pointer;
 }
 
+.ChatOrderedList,
+.ChatUnorderedList {
+  margin: 6px 0;
+  padding-inline-start: 20px;
+}
+
+.ChatOrderedListItem,
+.ChatUnorderedListItem {
+  margin: 2px 0;
+}
+
 .MarkdownTable {
   width: 100%;
   margin: 6px 0;
@@ -6071,6 +6319,8 @@ const ChatToolCallRenderHtmlBody = 'ChatToolCallRenderHtmlBody';
 const ChatMessageLink = 'ChatMessageLink';
 const ChatOrderedList = 'ChatOrderedList';
 const ChatOrderedListItem = 'ChatOrderedListItem';
+const ChatUnorderedList = 'ChatUnorderedList';
+const ChatUnorderedListItem = 'ChatUnorderedListItem';
 const MessageUser = 'MessageUser';
 const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
@@ -6314,6 +6564,15 @@ const getInlineNodeDom = inlineNode => {
   }, text(inlineNode.text)];
 };
 
+const getCodeBlockDom = node => {
+  return [{
+    childCount: 1,
+    type: Pre
+  }, {
+    childCount: 1,
+    type: Code
+  }, text(node.text)];
+};
 const getOrderedListItemDom = item => {
   return [{
     childCount: item.children.length,
@@ -6321,6 +6580,13 @@ const getOrderedListItemDom = item => {
     type: Li
   }, ...item.children.flatMap(getInlineNodeDom)];
 };
+const getUnorderedListItemDom = item => {
+  return [{
+    childCount: item.children.length,
+    className: ChatUnorderedListItem,
+    type: Li
+  }, ...item.children.flatMap(getInlineNodeDom)];
+};
 const getTableHeadCellDom = cell => {
   return [{
     childCount: cell.children.length,
@@ -6355,6 +6621,28 @@ const getTableDom = node => {
     type: TBody
   }, ...node.rows.flatMap(getTableRowDom)];
 };
+const getHeadingElementType = level => {
+  switch (level) {
+    case 1:
+      return H1;
+    case 2:
+      return H2;
+    case 3:
+      return H3;
+    case 4:
+      return H4;
+    case 5:
+      return H5;
+    case 6:
+      return H6;
+  }
+};
+const getHeadingDom = node => {
+  return [{
+    childCount: node.children.length,
+    type: getHeadingElementType(node.level)
+  }, ...node.children.flatMap(getInlineNodeDom)];
+};
 const getMessageNodeDom = node => {
   if (node.type === 'text') {
     return [{
@@ -6366,11 +6654,24 @@ const getMessageNodeDom = node => {
   if (node.type === 'table') {
     return getTableDom(node);
   }
+  if (node.type === 'code-block') {
+    return getCodeBlockDom(node);
+  }
+  if (node.type === 'heading') {
+    return getHeadingDom(node);
+  }
+  if (node.type === 'ordered-list') {
+    return [{
+      childCount: node.items.length,
+      className: ChatOrderedList,
+      type: Ol
+    }, ...node.items.flatMap(getOrderedListItemDom)];
+  }
   return [{
     childCount: node.items.length,
-    className: ChatOrderedList,
-    type: Ol
-  }, ...node.items.flatMap(getOrderedListItemDom)];
+    className: ChatUnorderedList,
+    type: Ul
+  }, ...node.items.flatMap(getUnorderedListItemDom)];
 };
 
 const getMessageContentDom = nodes => {
@@ -6916,8 +7217,11 @@ const getToolCallsDom = message => {
 };
 
 const orderedListItemRegex = /^\s*\d+\.\s+(.*)$/;
+const unorderedListItemRegex = /^\s*[-*]\s+(.*)$/;
 const markdownInlineRegex = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*/g;
 const markdownTableSeparatorCellRegex = /^:?-{3,}:?$/;
+const fencedCodeBlockRegex = /^```/;
+const markdownHeadingRegex = /^\s*(#{1,6})\s+(.*)$/;
 const normalizeInlineTables = value => {
   return value.split(/\r?\n/).map(line => {
     if (!line.includes('|')) {
@@ -7020,6 +7324,7 @@ const parseMessageContent = rawMessage => {
   const nodes = [];
   let paragraphLines = [];
   let listItems = [];
+  let listType = '';
   const flushParagraph = () => {
     if (paragraphLines.length === 0) {
       return;
@@ -7036,9 +7341,10 @@ const parseMessageContent = rawMessage => {
     }
     nodes.push({
       items: listItems,
-      type: 'list'
+      type: listType || 'ordered-list'
     });
     listItems = [];
+    listType = '';
   };
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
@@ -7047,6 +7353,21 @@ const parseMessageContent = rawMessage => {
       flushParagraph();
       continue;
     }
+    if (fencedCodeBlockRegex.test(line.trim())) {
+      flushList();
+      flushParagraph();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !fencedCodeBlockRegex.test(lines[i].trim())) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      nodes.push({
+        text: codeLines.join('\n'),
+        type: 'code-block'
+      });
+      continue;
+    }
     if (isTableRow(line) && i + 1 < lines.length) {
       const headerCells = getTableCells(line);
       if (isTableSeparatorRow(lines[i + 1], headerCells.length)) {
@@ -7070,15 +7391,43 @@ const parseMessageContent = rawMessage => {
         continue;
       }
     }
-    const match = line.match(orderedListItemRegex);
-    if (match) {
+    const orderedMatch = line.match(orderedListItemRegex);
+    if (orderedMatch) {
+      if (listType && listType !== 'ordered-list') {
+        flushList();
+      }
+      flushParagraph();
+      listType = 'ordered-list';
+      listItems.push({
+        children: parseInlineNodes(orderedMatch[1]),
+        type: 'list-item'
+      });
+      continue;
+    }
+    const unorderedMatch = line.match(unorderedListItemRegex);
+    if (unorderedMatch) {
+      if (listType && listType !== 'unordered-list') {
+        flushList();
+      }
       flushParagraph();
+      listType = 'unordered-list';
       listItems.push({
-        children: parseInlineNodes(match[1]),
+        children: parseInlineNodes(unorderedMatch[1]),
         type: 'list-item'
       });
       continue;
     }
+    const headingMatch = line.match(markdownHeadingRegex);
+    if (headingMatch) {
+      flushList();
+      flushParagraph();
+      nodes.push({
+        children: parseInlineNodes(headingMatch[2]),
+        level: headingMatch[1].length,
+        type: 'heading'
+      });
+      continue;
+    }
     flushList();
     paragraphLines.push(line);
   }
@@ -7532,6 +7881,7 @@ const commandMap = {
   'Chat.mockOpenApiStreamPushChunk': wrapCommand(mockOpenApiStreamPushChunk),
   'Chat.mockOpenApiStreamReset': wrapCommand(mockOpenApiStreamReset),
   'Chat.openMockSession': wrapCommand(openMockSession),
+  'Chat.registerMockResponse': wrapCommand(registerMockResponse),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
   'Chat.rerender': wrapCommand(rerender),

package/package.json

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