Feature/20250215-AddingThinkFence

src/commands/scm/generateComments.ts

@@ -18,7 +18,9 @@ export default class GenerateCommentsCommand implements Command {
 
     const diff = await getGitDifferences(gitService)
     if (diff) {
-      const comments = await getComments(diff)
+      const s = await getComments(diff)
+      const comments = s.replace(/<\s*think\s*>(.*?)<\/think>/gs, '').trim()
+
       createDebugNotification(
         `GitService: diff(${diff.length}) ~ comments(${comments.length})`
       )

src/panels/messageViewerPanel/onDidFunctions/onDidSaveMessages.ts

@@ -28,8 +28,10 @@ export const onDidSaveMessages = async (
     //Add summary to conversation
     if (conversation.chatMessages.length % SUMMARY_THRESHOLD == 0) {
       //Deep clone for summary
-      const summary = JSON.parse(JSON.stringify(conversation)) as IConversation
-      summary.embeddingId = undefined // ignore embedding for summary
+      const tempConversation = JSON.parse(
+        JSON.stringify(conversation)
+      ) as IConversation
+      tempConversation.embeddingId = undefined // ignore embedding for summary
       const chatCompletion: IChatCompletion = {
         content: `Please summarise the content above. The summary must be less than ${SUMMARY_MAX_LENGTH} words. Only provide the facts within the content.`,
         author: 'summary',
@@ -39,13 +41,16 @@ export const onDidSaveMessages = async (
         promptTokens: 0,
         totalTokens: 0,
       }
-      summary.chatMessages.push(chatCompletion)
+      tempConversation.chatMessages.push(chatCompletion)
 
       function messageCallback(_type: string, data: IChatCompletion): void {
         if (!conversation) return
+
         conversation.summary = data.content
+          .replace(/<\s*think\s*>(.*?)<\/think>/gs, '')
+          .trim()
       }
-      createChatCompletionMessage(summary, cfg, messageCallback)
+      createChatCompletionMessage(tempConversation, cfg, messageCallback)
     }
   } catch (error) {
     window.showErrorMessage(error as string)

webview/message/src/components/MessageItem/components/ThinkSection.tsx

@@ -0,0 +1,29 @@
+import { FC, useState } from 'react'
+import { Button } from '@fluentui/react-components'
+import { CommentMultipleLinkRegular } from '@fluentui/react-icons'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+const ThinkSection: FC<{ content: string }> = ({ content }) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <Button
+        appearance="subtle"
+        size="small"
+        icon={<CommentMultipleLinkRegular />}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {isOpen ? 'Collapse' : 'Expand'} reasoning
+      </Button>
+      {isOpen && (
+        <div>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ThinkSection

webview/message/src/components/MessageItem/components/index.tsx

@@ -2,3 +2,4 @@ export { default as CodeBlockMatched } from './CodeBlockMatched'
 export { default as CodeBlockUnmatched } from './CodeBlockUnmatched'
 export { default as MessageItemTokenInfo } from './MessageItemTokenInfo'
 export { default as MessageItemToolbar } from './MessageItemToolbar'
+export { default as ThinkSection } from './ThinkSection'

webview/message/src/components/MessageItem/index.tsx

@@ -8,6 +8,7 @@ import {
   CodeBlockMatched,
   CodeBlockUnmatched,
   MessageItemToolbar,
+  ThinkSection,
 } from './components'
 
 export const MessageItem: FC<IChatCompletionProps> = ({ chatCompletion }) => {
@@ -28,6 +29,24 @@ export const MessageItem: FC<IChatCompletionProps> = ({ chatCompletion }) => {
       : configuration.assistantColor,
   }
 
+  // Function to extract <think> content from chatCompletion.content
+  const extractThinkSections = (content: string) => {
+    const thinkSections: string[] = []
+    const regex = /<think>([\s\S]*?)<\/think>/g
+    let match
+
+    while ((match = regex.exec(content)) !== null) {
+      thinkSections.push(match[1])
+    }
+
+    const cleanedContent = content.replace(/<think>[\s\S]*?<\/think>/g, '')
+    return { cleanedContent, thinkSections }
+  }
+
+  const { cleanedContent, thinkSections } = extractThinkSections(
+    chatCompletion.content
+  )
+
   return (
     <div
       className={MessageItemStyles.messageItem}
@@ -39,7 +58,6 @@ export const MessageItem: FC<IChatCompletionProps> = ({ chatCompletion }) => {
     >
       <div className={MessageItemStyles.messageWrapper}>
         <div className={MessageItemStyles.messageHeader}>
-          {/* Conditionally render author if the message is not from the user */}
           {chatCompletion.mine ? null : (
             <span className={MessageItemStyles.author}>
               {chatCompletion.author}
@@ -49,14 +67,13 @@ export const MessageItem: FC<IChatCompletionProps> = ({ chatCompletion }) => {
             {' '}
             Date: {chatCompletion.timestamp}
           </span>
-          {/* Render MessageUtility component if totalTokens is greater than 0 */}
           {chatCompletion.totalTokens > 0 && (
             <MessageItemToolbar chatCompletion={chatCompletion} />
           )}
         </div>
       </div>
       <ReactMarkdown
-        children={chatCompletion.content.trim()}
+        children={cleanedContent.trim()}
         remarkPlugins={[remarkGfm]}
         components={{
           code(props) {
@@ -73,6 +90,9 @@ export const MessageItem: FC<IChatCompletionProps> = ({ chatCompletion }) => {
           },
         }}
       />
+      {thinkSections.map((content, index) => (
+        <ThinkSection key={index} content={content} />
+      ))}
     </div>
   )
 }