refactor: improve message rendering and add reasoning content extraction

- Refactored `getMessageBackground` function for better readability.
- Updated `MessageContent` component to use a new `withMessageThought` utility for extracting reasoning content from messages.
- Changed fragment usage to `Fragment` for consistency in JSX.
- Enhanced message handling by separating reasoning content from the main message content.

src/renderer/src/pages/home/Messages/Message.tsx

@@ -31,8 +31,13 @@ interface Props {
   onDeleteMessage?: (message: Message) => Promise<void>
 }
 
-const getMessageBackground = (isBubbleStyle: boolean, isAssistantMessage: boolean) =>
+const getMessageBackground = (isBubbleStyle: boolean, isAssistantMessage: boolean) => {
-  isBubbleStyle ? (isAssistantMessage ? 'var(--chat-background-assistant)' : 'var(--chat-background-user)') : undefined
+  return isBubbleStyle
+    ? isAssistantMessage
+      ? 'var(--chat-background-assistant)'
+      : 'var(--chat-background-user)'
+    : undefined
+}
 
 const MessageItem: FC<Props> = ({
   message: _message,

src/renderer/src/pages/home/Messages/MessageContent.tsx

@@ -1,8 +1,9 @@
 import { SyncOutlined, TranslationOutlined } from '@ant-design/icons'
 import { Message, Model } from '@renderer/types'
 import { getBriefInfo } from '@renderer/utils'
+import { withMessageThought } from '@renderer/utils/formats'
 import { Divider, Flex } from 'antd'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
 import BeatLoader from 'react-spinners/BeatLoader'
 import styled from 'styled-components'
@@ -13,11 +14,14 @@ import MessageError from './MessageError'
 import MessageSearchResults from './MessageSearchResults'
 import MessageThought from './MessageThought'
 
-const MessageContent: React.FC<{
+interface Props {
   message: Message
   model?: Model
-}> = ({ message, model }) => {
+}
+
+const MessageContent: React.FC<Props> = ({ message: _message, model }) => {
   const { t } = useTranslation()
+  const message = withMessageThought(_message)
 
   if (message.status === 'sending') {
     return (
@@ -37,14 +41,14 @@ const MessageContent: React.FC<{
   }
 
   return (
-    <>
+    <Fragment>
       <Flex gap="8px" wrap style={{ marginBottom: 10 }}>
         {message.mentions?.map((model) => <MentionTag key={model.id}>{'@' + model.name}</MentionTag>)}
       </Flex>
       <MessageThought message={message} />
       <Markdown message={message} />
       {message.translatedContent && (
-        <>
+        <Fragment>
           <Divider style={{ margin: 0, marginBottom: 10 }}>
             <TranslationOutlined />
           </Divider>
@@ -53,11 +57,11 @@ const MessageContent: React.FC<{
           ) : (
             <Markdown message={{ ...message, content: message.translatedContent }} />
           )}
-        </>
+        </Fragment>
       )}
       <MessageAttachments message={message} />
       <MessageSearchResults message={message} />
-    </>
+    </Fragment>
   )
 }
 

src/renderer/src/utils/formats.ts

@@ -80,3 +80,22 @@ export function withGeminiGrounding(message: Message) {
 
   return content
 }
+
+export function withMessageThought(message: Message) {
+  const content = message.content
+
+  const thinkPattern = /<think>(.*?)<\/think>/s
+  const matches = content.match(thinkPattern)
+
+  if (matches) {
+    const reasoning_content = matches[1].trim()
+    const remainingContent = content.replace(thinkPattern, '').trim()
+    if (reasoning_content) {
+      message.reasoning_content = reasoning_content
+      message.content = remainingContent
+      return message
+    }
+  }
+
+  return message
+}