feat: Add grid mode settings for message display

2025-12-25 03:10:08 +08:00 · 2025-02-17 18:35:36 +08:00 · 2025-02-17 18:35:36 +08:00 · 83ddb8e161
commit 83ddb8e161
parent 43375058af
8 changed files with 43 additions and 36 deletions
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/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",
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/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": "メッセージ設定",
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/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": "Модель по умолчанию",
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/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": "消息设置",
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/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": "訊息設定",
--- a/src/renderer/src/pages/home/Messages/MessageGroup.tsx
+++ b/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;
 `

--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/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>
--- a/src/renderer/src/store/migrate.ts
+++ b/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
  }
 }