feat: Add grid mode settings for message display

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

@@ -641,6 +641,8 @@
       "messages.math_engine": "Math engine",
       "messages.grid_columns": "Message grid display columns",
       "messages.grid_popover_trigger": "Grid detail trigger",
+      "messages.grid_popover_trigger.hover": "Hover to display",
+      "messages.grid_popover_trigger.click": "Click to display",
       "messages.metrics": "{{time_first_token_millsec}}ms to first token | {{token_speed}} tok/sec",
       "messages.model.title": "Model Settings",
       "messages.title": "Message Settings",

src/renderer/src/i18n/locales/ja-jp.json

@@ -641,6 +641,8 @@
       "messages.math_engine": "数式エンジン",
       "messages.grid_columns": "メッセージグリッドの表示列数",
       "messages.grid_popover_trigger": "グリッド詳細トリガー",
+      "messages.grid_popover_trigger.hover": "ホバーで表示",
+      "messages.grid_popover_trigger.click": "クリックで表示",
       "messages.metrics": "最初のトークンまでの時間 {{time_first_token_millsec}}ms | トークン速度 {{token_speed}} tok/sec",
       "messages.model.title": "モデル設定",
       "messages.title": "メッセージ設定",

src/renderer/src/i18n/locales/ru-ru.json

@@ -642,6 +642,8 @@
       "messages.model.title": "Настройки модели",
       "messages.grid_columns": "Количество столбцов сетки сообщений",
       "messages.grid_popover_trigger": "Триггер для отображения подробной информации в сетке",
+      "messages.grid_popover_trigger.hover": "Наведение для отображения",
+      "messages.grid_popover_trigger.click": "Нажатие для отображения",
       "messages.title": "Настройки сообщений",
       "messages.use_serif_font": "Использовать serif шрифт",
       "model": "Модель по умолчанию",

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

@@ -641,6 +641,8 @@
       "messages.math_engine": "数学公式引擎",
       "messages.grid_columns": "消息网格展示列数",
       "messages.grid_popover_trigger": "网格详情触发",
+      "messages.grid_popover_trigger.hover": "悬停显示",
+      "messages.grid_popover_trigger.click": "点击显示",
       "messages.metrics": "首字时延 {{time_first_token_millsec}}ms | 每秒 {{token_speed}} tokens",
       "messages.model.title": "模型设置",
       "messages.title": "消息设置",

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

@@ -640,6 +640,8 @@
       "messages.math_engine": "Markdown 渲染輸入訊息",
       "messages.grid_columns": "消息網格展示列數",
       "messages.grid_popover_trigger": "網格詳情觸發",
+      "messages.grid_popover_trigger.hover": "懸停顯示",
+      "messages.grid_popover_trigger.click": "點擊顯示",
       "messages.metrics": "首字時延 {{time_first_token_millsec}}ms | 每秒 {{token_speed}} tokens",
       "messages.model.title": "模型設定",
       "messages.title": "訊息設定",

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

@@ -10,9 +10,10 @@ import { HStack } from '@renderer/components/Layout'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
-import { MultiModelMessageStyle } from '@renderer/store/settings'
+import { useAppDispatch } from '@renderer/store'
+import { MultiModelMessageStyle, setGridColumns, setGridPopoverTrigger } from '@renderer/store/settings'
 import { Message, Model, Topic } from '@renderer/types'
-import { Button, Popover, Segmented as AntdSegmented } from 'antd'
+import { Button, Popover, Segmented as AntdSegmented, Select, Slider } from 'antd'
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
@@ -38,8 +39,10 @@ const MessageGroup: FC<Props> = ({
   onGetMessages,
   onDeleteGroupMessages
 }) => {
-  const { multiModelMessageStyle: multiModelMessageStyleSetting, gridColumns, gridPopoverTrigger } = useSettings()
+  const { multiModelMessageStyle: multiModelMessageStyleSetting, gridColumns } = useSettings()
   const { t } = useTranslation()
+  const dispatch = useAppDispatch()
+  const [gridColumnsValue, setGridColumnsValue] = useState(gridColumns)
 
   const [multiModelMessageStyle, setMultiModelMessageStyle] =
     useState<MultiModelMessageStyle>(multiModelMessageStyleSetting)
@@ -47,6 +50,8 @@ const MessageGroup: FC<Props> = ({
   const messageLength = messages.length
   const [selectedIndex, setSelectedIndex] = useState(messageLength - 1)
 
+  const { gridPopoverTrigger } = useSettings()
+
   const isGrouped = messageLength > 1
 
   const onDelete = async () => {
@@ -193,6 +198,26 @@ const MessageGroup: FC<Props> = ({
                 />
               </ModelsContainer>
             )}
+            {multiModelMessageStyle === 'grid' && (
+              <HStack style={{ marginLeft: 20, gap: 20, alignItems: 'center' }}>
+                <Select
+                  value={gridPopoverTrigger || 'hover'}
+                  onChange={(value) => dispatch(setGridPopoverTrigger(value))}
+                  size="small">
+                  <Select.Option value="hover">{t('settings.messages.grid_popover_trigger.hover')}</Select.Option>
+                  <Select.Option value="click">{t('settings.messages.grid_popover_trigger.click')}</Select.Option>
+                </Select>
+                <Slider
+                  style={{ width: 80 }}
+                  value={gridColumnsValue}
+                  onChange={(value) => setGridColumnsValue(value)}
+                  onChangeComplete={(value) => dispatch(setGridColumns(value))}
+                  min={2}
+                  max={6}
+                  step={1}
+                />
+              </HStack>
+            )}
           </HStack>
           <Button
             type="text"
@@ -231,6 +256,7 @@ const GridContainer = styled.div<{ $count: number; $layout: MultiModelMessageSty
       grid-template-columns: repeat(${$count > 1 ? $gridColumns || 2 : 1}, minmax(0, 1fr));
       grid-template-rows: auto;
       gap: 16px;
+      margin-top: 20px;
     `}
 `
 
@@ -274,11 +300,11 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
           border: 0.5px solid var(--color-border);
           padding: 10px;
           border-radius: 6px;
+          background-color: var(--color-background);
         `
       : css`
           overflow-y: auto;
           border: 0.5px solid transparent;
-          padding: 0 10px;
           border-radius: 6px;
         `}
 `
@@ -295,7 +321,7 @@ const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
   overflow: hidden;
   border: 0.5px solid var(--color-border);
   height: 40px;
-  margin-left: ${({ $layout }) => ($layout === 'horizontal' ? '0' : '40px')};
+  margin-left: ${({ $layout }) => (['horizontal', 'grid'].includes($layout) ? '0' : '40px')};
   transition: all 0.3s ease;
 `
 

src/renderer/src/pages/home/Tabs/SettingsTab.tsx

@@ -19,8 +19,6 @@ import {
   setCodeShowLineNumbers,
   setCodeStyle,
   setFontSize,
-  setGridColumns,
-  setGridPopoverTrigger,
   setMathEngine,
   setMessageFont,
   setMessageStyle,
@@ -51,7 +49,6 @@ const SettingsTab: FC<Props> = (props) => {
   const [enableMaxTokens, setEnableMaxTokens] = useState(assistant?.settings?.enableMaxTokens ?? false)
   const [maxTokens, setMaxTokens] = useState(assistant?.settings?.maxTokens ?? 0)
   const [fontSizeValue, setFontSizeValue] = useState(fontSize)
-  const [gridColumnsValue, setGridColumnsValue] = useState(gridColumns)
   const [streamOutput, setStreamOutput] = useState(assistant?.settings?.streamOutput ?? true)
   const { t } = useTranslation()
 
@@ -318,34 +315,6 @@ const SettingsTab: FC<Props> = (props) => {
           </Select>
         </SettingRow>
         <SettingDivider />
-        <SettingRow>
-          <SettingRowTitleSmall>{t('settings.messages.grid_popover_trigger')}</SettingRowTitleSmall>
-          <Select
-            value={gridPopoverTrigger || 'hover'}
-            onChange={(value) => dispatch(setGridPopoverTrigger(value))}
-            style={{ width: 135 }}
-            size="small">
-            <Select.Option value="hover">hover</Select.Option>
-            <Select.Option value="click">click</Select.Option>
-          </Select>
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitleSmall>{t('settings.messages.grid_columns')}</SettingRowTitleSmall>
-        </SettingRow>
-        <Row align="middle" gutter={10}>
-          <Col span={24}>
-            <Slider
-              value={gridColumnsValue}
-              onChange={(value) => setGridColumnsValue(value)}
-              onChangeComplete={(value) => dispatch(setGridColumns(value))}
-              min={2}
-              max={9}
-              step={1}
-            />
-          </Col>
-        </Row>
-        <SettingDivider />
         <SettingRow>
           <SettingRowTitleSmall>{t('settings.font_size.title')}</SettingRowTitleSmall>
         </SettingRow>

src/renderer/src/store/migrate.ts

@@ -1071,6 +1071,8 @@ const migrateConfig = {
         state.minapps.enabled.push(coze)
       }
     }
+    state.settings.gridColumns = 2
+    state.settings.gridPopoverTrigger = 'hover'
     return state
   }
 }