fix: group message bugs

src/renderer/src/assets/styles/index.scss

@@ -256,9 +256,6 @@ body,
       border: 1px solid var(--color-background-mute);
     }
   }
-  .group-menu-bar {
-    background-color: var(--color-background);
-  }
   code {
     color: var(--color-text);
   }

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

@@ -253,6 +253,10 @@
       "message.style": "Message style",
       "message.style.bubble": "Bubble",
       "message.style.plain": "Plain",
+      "message.multi_model_style": "Multi-model answer style",
+      "message.multi_model_style.horizontal": "Horizontal",
+      "message.multi_model_style.vertical": "Vertical",
+      "message.multi_model_style.fold": "Fold",
       "reset.confirm.content": "Are you sure you want to clear all data?",
       "reset.double.confirm.content": "All data will be lost, do you want to continue?",
       "reset.double.confirm.title": "DATA LOST !!!",

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

@@ -252,6 +252,10 @@
       "message.style": "メッセージスタイル",
       "message.style.bubble": "バブル",
       "message.style.plain": "プレーン",
+      "message.multi_model_style": "複数モデル回答スタイル",
+      "message.multi_model_style.horizontal": "水平",
+      "message.multi_model_style.vertical": "垂直",
+      "message.multi_model_style.fold": "折りたたむ",
       "reset.confirm.content": "すべてのデータをリセットしてもよろしいですか？",
       "reset.double.confirm.content": "すべてのデータが失われます。続行しますか？",
       "reset.double.confirm.title": "データが失われます！！！",

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

@@ -253,6 +253,10 @@
       "message.style": "Стиль сообщения",
       "message.style.bubble": "Пузырь",
       "message.style.plain": "Простой",
+      "message.multi_model_style": "Стиль ответов от нескольких моделей",
+      "message.multi_model_style.horizontal": "Горизонтальный",
+      "message.multi_model_style.vertical": "Вертикальный",
+      "message.multi_model_style.fold": "Свернуть",
       "reset.confirm.content": "Вы уверены, что хотите очистить все данные?",
       "reset.double.confirm.content": "Все данные будут утеряны, хотите продолжить?",
       "reset.double.confirm.title": "ДАННЫЕ БУДУТ УТЕРЯНЫ !!!",

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

@@ -253,6 +253,10 @@
       "message.style": "消息樣式",
       "message.style.bubble": "氣泡",
       "message.style.plain": "簡潔",
+      "message.multi_model_style": "多模型回答樣式",
+      "message.multi_model_style.horizontal": "水平",
+      "message.multi_model_style.vertical": "垂直",
+      "message.multi_model_style.fold": "折疊",
       "reset.confirm.content": "確定要清除所有資料嗎？",
       "reset.double.confirm.content": "所有資料將會被清除，您確定要繼續嗎？",
       "reset.double.confirm.title": "資料將會丟失！！！",

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

@@ -27,6 +27,7 @@ interface Props {
   total?: number
   hidePresetMessages?: boolean
   style?: React.CSSProperties
+  isGrouped?: boolean
   onGetMessages?: () => Message[]
   onSetMessages?: Dispatch<SetStateAction<Message[]>>
   onDeleteMessage?: (message: Message) => Promise<void>
@@ -45,6 +46,7 @@ const MessageItem: FC<Props> = ({
   topic,
   index,
   hidePresetMessages,
+  isGrouped,
   style,
   onDeleteMessage,
   onSetMessages,
@@ -187,6 +189,7 @@ const MessageItem: FC<Props> = ({
               index={index}
               isLastMessage={isLastMessage}
               isAssistantMessage={isAssistantMessage}
+              isGrouped={isGrouped}
               setModel={setModel}
               onEditMessage={onEditMessage}
               onDeleteMessage={onDeleteMessage}

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

@@ -6,7 +6,7 @@ import { useSettings } from '@renderer/hooks/useSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { MultiModelMessageStyle } from '@renderer/store/settings'
 import { Message, Model, Topic } from '@renderer/types'
-import { Button, Segmented } from 'antd'
+import { Button, Segmented as AntdSegmented } from 'antd'
 import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import styled, { css } from 'styled-components'
 
@@ -63,6 +63,7 @@ const MessageGroup: FC<Props> = ({
             key={message.id}
             className={message.role === 'assistant' && isHorizontal && isGrouped ? 'group-message-wrapper' : ''}>
             <MessageItem
+              isGrouped={isGrouped}
               message={message}
               topic={topic}
               index={message.index}
@@ -76,10 +77,10 @@ const MessageGroup: FC<Props> = ({
         ))}
       </GridContainer>
       {isGrouped && (
-        <GroupMenuBar className="group-menu-bar">
+        <GroupMenuBar className="group-menu-bar" $layout={multiModelMessageStyle}>
           <HStack style={{ alignItems: 'center', flex: 1, overflow: 'hidden' }}>
             <LayoutContainer>
-              {['fold', 'horizontal', 'vertical'].map((layout) => (
+              {['fold', 'vertical', 'horizontal'].map((layout) => (
                 <LayoutOption
                   key={layout}
                   active={multiModelMessageStyle === layout}
@@ -180,17 +181,20 @@ const MessageWrapper = styled(Scrollbar)<MessageWrapperProps>`
   }}
 `
 
-const GroupMenuBar = styled.div`
+const GroupMenuBar = styled.div<{ $layout: MultiModelMessageStyle }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
-  background-color: var(--color-background-soft);
   padding: 6px 10px;
   border-radius: 6px;
   margin-top: 10px;
   justify-content: space-between;
   overflow: hidden;
+  border: 0.5px solid var(--color-border);
+  height: 40px;
+  margin-left: ${({ $layout }) => ($layout === 'horizontal' ? '0' : '40px')};
+  transition: all 0.3s ease;
 `
 
 const LayoutContainer = styled.div`
@@ -203,11 +207,10 @@ const LayoutOption = styled.div<{ active: boolean }>`
   cursor: pointer;
   padding: 2px 10px;
   border-radius: 4px;
-  background-color: ${({ active }) => (active ? 'var(--color-primary)' : 'transparent')};
+  background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'transparent')};
-  color: ${({ active }) => (active ? 'var(--color-white)' : 'inherit')};
 
   &:hover {
-    background-color: ${({ active }) => (active ? 'var(--color-primary)' : 'var(--color-hover)')};
+    background-color: ${({ active }) => (active ? 'var(--color-background-soft)' : 'var(--color-hover)')};
   }
 `
 
@@ -220,6 +223,22 @@ const ModelsContainer = styled(Scrollbar)`
   }
 `
 
+const Segmented = styled(AntdSegmented)`
+  .ant-segmented-item {
+    background-color: transparent !important;
+    transition: none !important;
+    &:hover {
+      background: transparent !important;
+    }
+  }
+  .ant-segmented-thumb,
+  .ant-segmented-item-selected {
+    background-color: transparent !important;
+    border: 0.5px solid var(--color-border);
+    transition: none !important;
+  }
+`
+
 const SegmentedLabel = styled.div`
   display: flex;
   align-items: center;

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

@@ -30,6 +30,7 @@ interface Props {
   assistantModel?: Model
   model?: Model
   index?: number
+  isGrouped?: boolean
   isLastMessage: boolean
   isAssistantMessage: boolean
   setModel: (model: Model) => void
@@ -42,6 +43,7 @@ const MessageMenubar: FC<Props> = (props) => {
   const {
     message,
     index,
+    isGrouped,
     model,
     isLastMessage,
     isAssistantMessage,
@@ -252,14 +254,16 @@ const MessageMenubar: FC<Props> = (props) => {
           </ActionButton>
         </Tooltip>
       )}
-
       <Popconfirm
+        disabled={isGrouped}
         title={t('message.message.delete.content')}
         okButtonProps={{ danger: true }}
         icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
         onConfirm={() => onDeleteMessage?.(message)}>
         <Tooltip title={t('common.delete')} mouseEnterDelay={1}>
-          <ActionButton className="message-action-button">
+          <ActionButton
+            className="message-action-button"
+            onClick={isGrouped ? () => onDeleteMessage?.(message) : undefined}>
             <DeleteOutlined />
           </ActionButton>
         </Tooltip>

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

@@ -265,8 +265,8 @@ const SettingsTab: FC<Props> = (props) => {
             onChange={(value) => dispatch(setMultiModelMessageStyle(value))}
             style={{ width: 135 }}>
             <Select.Option value="fold">{t('message.message.multi_model_style.fold')}</Select.Option>
-            <Select.Option value="horizontal">{t('message.message.multi_model_style.horizontal')}</Select.Option>
             <Select.Option value="vertical">{t('message.message.multi_model_style.vertical')}</Select.Option>
+            <Select.Option value="horizontal">{t('message.message.multi_model_style.horizontal')}</Select.Option>
           </Select>
         </SettingRow>
         <SettingDivider />