fix: add markdown rendering input msg switcher #143 #142

src/renderer/src/i18n/en-us.json

@@ -178,6 +178,7 @@
       "messages.input.show_estimated_tokens": "Show estimated input tokens",
       "messages.input.send_shortcuts": "Send shortcuts",
       "messages.input.paste_long_text_as_file": "Paste long text as file",
+      "messages.markdown_rendering_input_message": "Markdown render input msg",
       "general.title": "General Settings",
       "general.user_name": "User Name",
       "general.user_name.placeholder": "Enter your name",

src/renderer/src/i18n/zh-cn.json

@@ -178,6 +178,7 @@
       "messages.input.show_estimated_tokens": "状态显示",
       "messages.input.send_shortcuts": "发送快捷键",
       "messages.input.paste_long_text_as_file": "长文本粘贴为文件",
+      "messages.markdown_rendering_input_message": "Markdown 渲染输入消息",
       "general.title": "常规设置",
       "general.user_name": "用户名",
       "general.user_name.placeholder": "请输入用户名",

src/renderer/src/i18n/zh-tw.json

@@ -178,6 +178,7 @@
       "messages.input.show_estimated_tokens": "顯示預估輸入 Token 數",
       "messages.input.send_shortcuts": "發送快捷鍵",
       "messages.input.paste_long_text_as_file": "將長文本貼上為檔案",
+      "messages.markdown_rendering_input_message": "Markdown 渲染輸入訊息",
       "general.title": "一般設定",
       "general.user_name": "使用者名稱",
       "general.user_name.placeholder": "輸入您的名稱",

src/renderer/src/pages/home/Markdown/Markdown.tsx

@@ -1,5 +1,6 @@
 import 'katex/dist/katex.min.css'
 
+import { useSettings } from '@renderer/hooks/useSettings'
 import { Message } from '@renderer/types'
 import { escapeBrackets } from '@renderer/utils/formula'
 import { isEmpty } from 'lodash'
@@ -27,6 +28,7 @@ const components = {
 
 const Markdown: FC<Props> = ({ message }) => {
   const { t } = useTranslation()
+  const { renderInputMessageAsMarkdown } = useSettings()
 
   const messageContent = useMemo(() => {
     const empty = isEmpty(message.content)
@@ -35,6 +37,10 @@ const Markdown: FC<Props> = ({ message }) => {
     return escapeBrackets(content)
   }, [message.content, message.status, t])
 
+  if (message.role === 'user' && !renderInputMessageAsMarkdown) {
+    return <p style={{ marginBottom: 5, whiteSpace: 'pre-wrap' }}>{messageContent}</p>
+  }
+
   return (
     <ReactMarkdown
       className="markdown"

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

@@ -1,5 +1,6 @@
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { getTopic, TopicManager } from '@renderer/hooks/useTopic'
 import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
 import { getDefaultTopic } from '@renderer/services/assistant'
@@ -10,7 +11,7 @@ import { Assistant, Message, Model, Topic } from '@renderer/types'
 import { captureScrollableDiv, runAsyncFunction, uuid } from '@renderer/utils'
 import { t } from 'i18next'
 import { flatten, last, reverse, take } from 'lodash'
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import Suggestions from '../components/Suggestions'
@@ -28,6 +29,14 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   const [lastMessage, setLastMessage] = useState<Message | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
   const { updateTopic, addTopic } = useAssistant(assistant.id)
+  const { showTopics, topicPosition, showAssistants } = useSettings()
+
+  const maxWidth = useMemo(() => {
+    const showRightTopics = showTopics && topicPosition === 'right'
+    const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
+    const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth}`
+  }, [showAssistants, showTopics, topicPosition])
 
   const onSendMessage = useCallback(
     async (message: Message) => {
@@ -204,7 +213,7 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   }, [assistant, messages])
 
   return (
-    <Container id="messages" key={assistant.id} ref={containerRef}>
+    <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef}>
       <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
       {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />}
       {reverse([...messages]).map((message, index) => (
@@ -231,6 +240,7 @@ const Container = styled.div`
   padding: 10px 0;
   background-color: var(--color-background);
   padding-bottom: 20px;
+  overflow-x: hidden;
 `
 
 export default Messages

src/renderer/src/pages/home/Settings.tsx

@@ -9,6 +9,7 @@ import {
   setFontSize,
   setMessageFont,
   setPasteLongTextAsFile,
+  setRenderInputMessageAsMarkdown,
   setShowInputEstimatedTokens,
   setShowMessageDivider
 } from '@renderer/store/settings'
@@ -41,7 +42,8 @@ const SettingsTab: FC<Props> = (props) => {
     showInputEstimatedTokens,
     sendMessageShortcut,
     setSendMessageShortcut,
-    pasteLongTextAsFile
+    pasteLongTextAsFile,
+    renderInputMessageAsMarkdown
   } = useSettings()
 
   const onUpdateAssistantSettings = (settings: Partial<AssistantSettings>) => {
@@ -242,6 +244,15 @@ const SettingsTab: FC<Props> = (props) => {
         />
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
+        <Switch
+          size="small"
+          checked={renderInputMessageAsMarkdown}
+          onChange={(checked) => dispatch(setRenderInputMessageAsMarkdown(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
       <SettingRow>
         <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
       </SettingRow>

src/renderer/src/store/index.ts

@@ -22,7 +22,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 26,
+    version: 27,
     blacklist: ['runtime'],
     migrate
   },

src/renderer/src/store/migrate.ts

@@ -433,6 +433,15 @@ const migrateConfig = {
         ]
       }
     }
+  },
+  '27': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        renderInputMessageAsMarkdown: true
+      }
+    }
   }
 }
 

src/renderer/src/store/settings.ts

@@ -20,7 +20,7 @@ export interface SettingsState {
   pasteLongTextAsFile: boolean
   clickAssistantToShowTopic: boolean
   manualUpdateCheck: boolean
-
+  renderInputMessageAsMarkdown: boolean
   // webdav 配置 host, user, pass, path
   webdavHost: string
   webdavUser: string
@@ -45,7 +45,7 @@ const initialState: SettingsState = {
   pasteLongTextAsFile: true,
   clickAssistantToShowTopic: false,
   manualUpdateCheck: false,
-
+  renderInputMessageAsMarkdown: true,
   webdavHost: '',
   webdavUser: '',
   webdavPass: '',
@@ -122,6 +122,9 @@ const settingsSlice = createSlice({
     },
     setWebdavPath: (state, action: PayloadAction<string>) => {
       state.webdavPath = action.payload
+    },
+    setRenderInputMessageAsMarkdown: (state, action: PayloadAction<boolean>) => {
+      state.renderInputMessageAsMarkdown = action.payload
     }
   }
 })
@@ -143,6 +146,7 @@ export const {
   setWindowStyle,
   setTopicPosition,
   setPasteLongTextAsFile,
+  setRenderInputMessageAsMarkdown,
   setClickAssistantToShowTopic,
   setManualUpdateCheck,
   setWebdavHost,