feat(message): 将fold display mode的状态持久化

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

@@ -1,9 +1,12 @@
 import { ArrowsAltOutlined, ShrinkOutlined } from '@ant-design/icons'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useAppDispatch } from '@renderer/store'
+import { setFoldDisplayMode } from '@renderer/store/settings'
 import { Message, Model } from '@renderer/types'
 import { Avatar, Segmented as AntdSegmented, Tooltip } from 'antd'
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -15,26 +18,27 @@ interface MessageGroupModelListProps {
 type DisplayMode = 'compact' | 'expanded'
 
 const MessageGroupModelList: FC<MessageGroupModelListProps> = ({ messages, setSelectedMessage }) => {
+  const dispatch = useAppDispatch()
   const { t } = useTranslation()
-  const [displayMode, setDisplayMode] = useState<DisplayMode>('expanded')
+  const { foldDisplayMode } = useSettings()
-  const isCompact = displayMode === 'compact'
+  const isCompact = foldDisplayMode === 'compact'
 
   return (
     <ModelsWrapper>
-      <DisplayModeToggle displayMode={displayMode} onClick={() => setDisplayMode(isCompact ? 'expanded' : 'compact')}>
+      <DisplayModeToggle displayMode={foldDisplayMode} onClick={() => dispatch(setFoldDisplayMode(isCompact ? 'expanded' : 'compact'))}>
         <Tooltip
           title={
-            displayMode === 'compact'
+            foldDisplayMode === 'compact'
               ? t(`message.message.multi_model_style.fold.expand`)
               : t('message.message.multi_model_style.fold.compress')
           }
           placement="top">
-          {displayMode === 'compact' ? <ArrowsAltOutlined /> : <ShrinkOutlined />}
+          {foldDisplayMode === 'compact' ? <ArrowsAltOutlined /> : <ShrinkOutlined />}
         </Tooltip>
       </DisplayModeToggle>
 
-      <ModelsContainer $displayMode={displayMode}>
+      <ModelsContainer $displayMode={foldDisplayMode}>
-        {displayMode === 'compact' ? (
+        {foldDisplayMode === 'compact' ? (
           /* Compact style display */
           <Avatar.Group className="avatar-group">
             {messages.map((message, index) => (

src/renderer/src/store/settings.ts

@@ -53,6 +53,7 @@ export interface SettingsState {
   mathEngine: 'MathJax' | 'KaTeX'
   messageStyle: 'plain' | 'bubble'
   codeStyle: CodeStyleVarious
+  foldDisplayMode: 'expanded' | 'compact'
   gridColumns: number
   gridPopoverTrigger: 'hover' | 'click'
   messageNavigation: 'none' | 'buttons' | 'anchor'
@@ -135,6 +136,7 @@ const initialState: SettingsState = {
   mathEngine: 'KaTeX',
   messageStyle: 'plain',
   codeStyle: 'auto',
+  foldDisplayMode: 'expanded',
   gridColumns: 2,
   gridPopoverTrigger: 'hover',
   messageNavigation: 'none',
@@ -295,6 +297,9 @@ const settingsSlice = createSlice({
     setMathEngine: (state, action: PayloadAction<'MathJax' | 'KaTeX'>) => {
       state.mathEngine = action.payload
     },
+    setFoldDisplayMode: (state, action: PayloadAction<'expanded' | 'compact'>) => {
+      state.foldDisplayMode = action.payload
+    },
     setGridColumns: (state, action: PayloadAction<number>) => {
       state.gridColumns = action.payload
     },
@@ -446,6 +451,7 @@ export const {
   setCodeCollapsible,
   setCodeWrappable,
   setMathEngine,
+  setFoldDisplayMode,
   setGridColumns,
   setGridPopoverTrigger,
   setMessageStyle,