From d64d6969ae90ca9091af68ad316e11af4d29c151 Mon Sep 17 00:00:00 2001
From: Sorades <2019302080119@whu.edu.cn>
Date: Wed, 26 Mar 2025 12:25:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(message):=20=E5=B0=86fold=20display=20mode?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E6=8C=81=E4=B9=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/Messages/MessageGroupModelList.tsx   | 20 +++++++++++--------
 src/renderer/src/store/settings.ts            |  6 ++++++
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx b/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx
index 315db3aa..c81d9adc 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroupModelList.tsx
+++ b/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 isCompact = displayMode === 'compact'
+  const { foldDisplayMode } = useSettings()
+  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}>
-        {displayMode === 'compact' ? (
+      <ModelsContainer $displayMode={foldDisplayMode}>
+        {foldDisplayMode === 'compact' ? (
           /* Compact style display */
           <Avatar.Group className="avatar-group">
             {messages.map((message, index) => (
diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts
index d4cd2c8b..e27dd8f6 100644
--- a/src/renderer/src/store/settings.ts
+++ b/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,